diff --git a/apps/demos/Demos/DateRangeBox/Formatting/React/App.tsx b/apps/demos/Demos/DateRangeBox/Formatting/React/App.tsx
index 4e8e838f875d..f98797229b69 100644
--- a/apps/demos/Demos/DateRangeBox/Formatting/React/App.tsx
+++ b/apps/demos/Demos/DateRangeBox/Formatting/React/App.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import DateRangeBox from 'devextreme-react/date-range-box';
-import type { DateRangeBoxTypes } from 'devextreme-react/date-range-box';
+import type { IDateRangeBoxOptions } from 'devextreme-react/date-range-box';
 
 const msInDay = 1000 * 60 * 60 * 24;
 const now = new Date();
 const startDate = new Date(now.getTime() - msInDay * 3);
 const endDate = new Date(now.getTime() + msInDay * 3);
 
-const commonSettings: DateRangeBoxTypes.Properties = {
+const commonSettings: IDateRangeBoxOptions = {
   showClearButton: true,
   useMaskBehavior: true,
   openOnFieldClick: false,
diff --git a/packages/devextreme-angular/src/ui/accordion/index.ts b/packages/devextreme-angular/src/ui/accordion/index.ts
index 7369e90a8cfd..772b2e05ce63 100644
--- a/packages/devextreme-angular/src/ui/accordion/index.ts
+++ b/packages/devextreme-angular/src/ui/accordion/index.ts
@@ -287,10 +287,10 @@ export class DxAccordionComponent<TItem = any, TKey = any> extends DxComponent i
     
      */
     @Input()
-    get keyExpr(): ((item: any) => any) | string {
+    get keyExpr(): ((item: any) => any) | null | string {
         return this._getOption('keyExpr');
     }
-    set keyExpr(value: ((item: any) => any) | string) {
+    set keyExpr(value: ((item: any) => any) | null | string) {
         this._setOption('keyExpr', value);
     }
 
@@ -365,10 +365,10 @@ export class DxAccordionComponent<TItem = any, TKey = any> extends DxComponent i
     
      */
     @Input()
-    get selectedItem(): any {
+    get selectedItem(): any | null {
         return this._getOption('selectedItem');
     }
-    set selectedItem(value: any) {
+    set selectedItem(value: any | null) {
         this._setOption('selectedItem', value);
     }
 
@@ -634,7 +634,7 @@ export class DxAccordionComponent<TItem = any, TKey = any> extends DxComponent i
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() keyExprChange: EventEmitter<((item: any) => any) | string>;
+    @Output() keyExprChange: EventEmitter<((item: any) => any) | null | string>;
 
     /**
     
@@ -676,7 +676,7 @@ export class DxAccordionComponent<TItem = any, TKey = any> extends DxComponent i
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() selectedItemChange: EventEmitter<any>;
+    @Output() selectedItemChange: EventEmitter<any | null>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/autocomplete/index.ts b/packages/devextreme-angular/src/ui/autocomplete/index.ts
index f5b7e5019026..2dcb08fb733d 100644
--- a/packages/devextreme-angular/src/ui/autocomplete/index.ts
+++ b/packages/devextreme-angular/src/ui/autocomplete/index.ts
@@ -162,10 +162,10 @@ export class DxAutocompleteComponent extends DxComponent implements OnDestroy, C
     
      */
     @Input()
-    get buttons(): Array<DropDownPredefinedButton | TextEditorButton> {
+    get buttons(): Array<DropDownPredefinedButton | TextEditorButton> | undefined {
         return this._getOption('buttons');
     }
-    set buttons(value: Array<DropDownPredefinedButton | TextEditorButton>) {
+    set buttons(value: Array<DropDownPredefinedButton | TextEditorButton> | undefined) {
         this._setOption('buttons', value);
     }
 
@@ -448,10 +448,10 @@ export class DxAutocompleteComponent extends DxComponent implements OnDestroy, C
     
      */
     @Input()
-    get maxLength(): number | string {
+    get maxLength(): null | number | string {
         return this._getOption('maxLength');
     }
-    set maxLength(value: number | string) {
+    set maxLength(value: null | number | string) {
         this._setOption('maxLength', value);
     }
 
@@ -591,10 +591,10 @@ export class DxAutocompleteComponent extends DxComponent implements OnDestroy, C
     
      */
     @Input()
-    get selectedItem(): any {
+    get selectedItem(): any | null {
         return this._getOption('selectedItem');
     }
-    set selectedItem(value: any) {
+    set selectedItem(value: any | null) {
         this._setOption('selectedItem', value);
     }
 
@@ -695,10 +695,10 @@ export class DxAutocompleteComponent extends DxComponent implements OnDestroy, C
     
      */
     @Input()
-    get validationError(): any {
+    get validationError(): any | null {
         return this._getOption('validationError');
     }
-    set validationError(value: any) {
+    set validationError(value: any | null) {
         this._setOption('validationError', value);
     }
 
@@ -708,10 +708,10 @@ export class DxAutocompleteComponent extends DxComponent implements OnDestroy, C
     
      */
     @Input()
-    get validationErrors(): Array<any> {
+    get validationErrors(): Array<any> | null {
         return this._getOption('validationErrors');
     }
-    set validationErrors(value: Array<any>) {
+    set validationErrors(value: Array<any> | null) {
         this._setOption('validationErrors', value);
     }
 
@@ -1003,7 +1003,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() buttonsChange: EventEmitter<Array<DropDownPredefinedButton | TextEditorButton>>;
+    @Output() buttonsChange: EventEmitter<Array<DropDownPredefinedButton | TextEditorButton> | undefined>;
 
     /**
     
@@ -1157,7 +1157,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() maxLengthChange: EventEmitter<number | string>;
+    @Output() maxLengthChange: EventEmitter<null | number | string>;
 
     /**
     
@@ -1234,7 +1234,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() selectedItemChange: EventEmitter<any>;
+    @Output() selectedItemChange: EventEmitter<any | null>;
 
     /**
     
@@ -1290,14 +1290,14 @@ 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() validationErrorChange: EventEmitter<any>;
+    @Output() validationErrorChange: EventEmitter<any | null>;
 
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorsChange: EventEmitter<Array<any>>;
+    @Output() validationErrorsChange: EventEmitter<Array<any> | null>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/autocomplete/nested/drop-down-options.ts b/packages/devextreme-angular/src/ui/autocomplete/nested/drop-down-options.ts
index 660c00d6ebad..72c75fc26d78 100644
--- a/packages/devextreme-angular/src/ui/autocomplete/nested/drop-down-options.ts
+++ b/packages/devextreme-angular/src/ui/autocomplete/nested/drop-down-options.ts
@@ -220,18 +220,18 @@ export class DxoAutocompleteDropDownOptionsComponent extends NestedOption implem
     }
 
     @Input()
-    get onContentReady(): ((e: EventInfo<any>) => void) {
+    get onContentReady(): ((e: EventInfo<any>) => void) | undefined {
         return this._getOption('onContentReady');
     }
-    set onContentReady(value: ((e: EventInfo<any>) => void)) {
+    set onContentReady(value: ((e: EventInfo<any>) => void) | undefined) {
         this._setOption('onContentReady', value);
     }
 
     @Input()
-    get onDisposing(): ((e: EventInfo<any>) => void) {
+    get onDisposing(): ((e: EventInfo<any>) => void) | undefined {
         return this._getOption('onDisposing');
     }
-    set onDisposing(value: ((e: EventInfo<any>) => void)) {
+    set onDisposing(value: ((e: EventInfo<any>) => void) | undefined) {
         this._setOption('onDisposing', value);
     }
 
@@ -252,42 +252,42 @@ export class DxoAutocompleteDropDownOptionsComponent extends NestedOption implem
     }
 
     @Input()
-    get onInitialized(): ((e: { component: CoreComponent<any>, element: any }) => void) {
+    get onInitialized(): ((e: { component: CoreComponent<any>, element: any }) => void) | undefined {
         return this._getOption('onInitialized');
     }
-    set onInitialized(value: ((e: { component: CoreComponent<any>, element: any }) => void)) {
+    set onInitialized(value: ((e: { component: CoreComponent<any>, element: any }) => void) | undefined) {
         this._setOption('onInitialized', value);
     }
 
     @Input()
-    get onOptionChanged(): ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) {
+    get onOptionChanged(): ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) | undefined {
         return this._getOption('onOptionChanged');
     }
-    set onOptionChanged(value: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void)) {
+    set onOptionChanged(value: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) | undefined) {
         this._setOption('onOptionChanged', value);
     }
 
     @Input()
-    get onResize(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) {
+    get onResize(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined {
         return this._getOption('onResize');
     }
-    set onResize(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)) {
+    set onResize(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined) {
         this._setOption('onResize', value);
     }
 
     @Input()
-    get onResizeEnd(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) {
+    get onResizeEnd(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined {
         return this._getOption('onResizeEnd');
     }
-    set onResizeEnd(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)) {
+    set onResizeEnd(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined) {
         this._setOption('onResizeEnd', value);
     }
 
     @Input()
-    get onResizeStart(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) {
+    get onResizeStart(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined {
         return this._getOption('onResizeStart');
     }
-    set onResizeStart(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)) {
+    set onResizeStart(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined) {
         this._setOption('onResizeStart', value);
     }
 
@@ -308,10 +308,10 @@ export class DxoAutocompleteDropDownOptionsComponent extends NestedOption implem
     }
 
     @Input()
-    get onTitleRendered(): ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) {
+    get onTitleRendered(): ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) | undefined {
         return this._getOption('onTitleRendered');
     }
-    set onTitleRendered(value: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void)) {
+    set onTitleRendered(value: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) | undefined) {
         this._setOption('onTitleRendered', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/autocomplete/nested/options.ts b/packages/devextreme-angular/src/ui/autocomplete/nested/options.ts
index 6fa1c9a5df31..00589bc9a71c 100644
--- a/packages/devextreme-angular/src/ui/autocomplete/nested/options.ts
+++ b/packages/devextreme-angular/src/ui/autocomplete/nested/options.ts
@@ -114,10 +114,10 @@ export class DxoAutocompleteOptionsComponent extends NestedOption implements Aft
     }
 
     @Input()
-    get onClick(): ((e: ClickEvent) => void) {
+    get onClick(): ((e: ClickEvent) => void) | undefined {
         return this._getOption('onClick');
     }
-    set onClick(value: ((e: ClickEvent) => void)) {
+    set onClick(value: ((e: ClickEvent) => void) | undefined) {
         this._setOption('onClick', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/bar-gauge/index.ts b/packages/devextreme-angular/src/ui/bar-gauge/index.ts
index aeadf6908e0a..dfdccf956e9a 100644
--- a/packages/devextreme-angular/src/ui/bar-gauge/index.ts
+++ b/packages/devextreme-angular/src/ui/bar-gauge/index.ts
@@ -248,10 +248,10 @@ export class DxBarGaugeComponent extends DxComponent implements OnDestroy, OnCha
     
      */
     @Input()
-    get legend(): { backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((arg: { item: BarGaugeBarInfo, text: string }) => string), customizeItems?: ((items: Array<BarGaugeLegendItem>) => Array<BarGaugeLegendItem>), customizeText?: ((arg: { item: BarGaugeBarInfo, text: string }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, itemsAlignment?: HorizontalAlignment | undefined, itemTextFormat?: Format | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, rowCount?: number, rowItemSpacing?: number, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean } {
+    get legend(): { backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((arg: { item: BarGaugeBarInfo, text: string }) => string), customizeItems?: ((items: Array<BarGaugeLegendItem>) => Array<BarGaugeLegendItem>), customizeText?: ((arg: { item: BarGaugeBarInfo, text: string }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, itemsAlignment?: HorizontalAlignment | undefined, itemTextFormat?: Format | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, rowCount?: number, rowItemSpacing?: number, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined }, text?: string | undefined, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean } {
         return this._getOption('legend');
     }
-    set legend(value: { backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((arg: { item: BarGaugeBarInfo, text: string }) => string), customizeItems?: ((items: Array<BarGaugeLegendItem>) => Array<BarGaugeLegendItem>), customizeText?: ((arg: { item: BarGaugeBarInfo, text: string }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, itemsAlignment?: HorizontalAlignment | undefined, itemTextFormat?: Format | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, rowCount?: number, rowItemSpacing?: number, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean }) {
+    set legend(value: { backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((arg: { item: BarGaugeBarInfo, text: string }) => string), customizeItems?: ((items: Array<BarGaugeLegendItem>) => Array<BarGaugeLegendItem>), customizeText?: ((arg: { item: BarGaugeBarInfo, text: string }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, itemsAlignment?: HorizontalAlignment | undefined, itemTextFormat?: Format | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, rowCount?: number, rowItemSpacing?: number, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined }, text?: string | undefined, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean }) {
         this._setOption('legend', value);
     }
 
@@ -417,10 +417,10 @@ export class DxBarGaugeComponent extends DxComponent implements OnDestroy, OnCha
     
      */
     @Input()
-    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap } {
+    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string | undefined, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap } {
         return this._getOption('title');
     }
-    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }) {
+    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string | undefined, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }) {
         this._setOption('title', value);
     }
 
@@ -612,7 +612,7 @@ export class DxBarGaugeComponent extends DxComponent implements OnDestroy, OnCha
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() legendChange: EventEmitter<{ backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((arg: { item: BarGaugeBarInfo, text: string }) => string), customizeItems?: ((items: Array<BarGaugeLegendItem>) => Array<BarGaugeLegendItem>), customizeText?: ((arg: { item: BarGaugeBarInfo, text: string }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, itemsAlignment?: HorizontalAlignment | undefined, itemTextFormat?: Format | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, rowCount?: number, rowItemSpacing?: number, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean }>;
+    @Output() legendChange: EventEmitter<{ backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((arg: { item: BarGaugeBarInfo, text: string }) => string), customizeItems?: ((items: Array<BarGaugeLegendItem>) => Array<BarGaugeLegendItem>), customizeText?: ((arg: { item: BarGaugeBarInfo, text: string }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, itemsAlignment?: HorizontalAlignment | undefined, itemTextFormat?: Format | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, rowCount?: number, rowItemSpacing?: number, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined }, text?: string | undefined, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean }>;
 
     /**
     
@@ -703,7 +703,7 @@ export class DxBarGaugeComponent extends DxComponent implements OnDestroy, OnCha
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() titleChange: EventEmitter<string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }>;
+    @Output() titleChange: EventEmitter<string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string | undefined, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/bar-gauge/nested/bar-gauge-title-subtitle.ts b/packages/devextreme-angular/src/ui/bar-gauge/nested/bar-gauge-title-subtitle.ts
index c478a14ae659..f79585f9f274 100644
--- a/packages/devextreme-angular/src/ui/bar-gauge/nested/bar-gauge-title-subtitle.ts
+++ b/packages/devextreme-angular/src/ui/bar-gauge/nested/bar-gauge-title-subtitle.ts
@@ -48,10 +48,10 @@ export class DxoBarGaugeBarGaugeTitleSubtitleComponent extends NestedOption impl
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/bar-gauge/nested/bar-gauge-title.ts b/packages/devextreme-angular/src/ui/bar-gauge/nested/bar-gauge-title.ts
index a4cfc3382dab..7bb3352d18b0 100644
--- a/packages/devextreme-angular/src/ui/bar-gauge/nested/bar-gauge-title.ts
+++ b/packages/devextreme-angular/src/ui/bar-gauge/nested/bar-gauge-title.ts
@@ -65,18 +65,18 @@ export class DxoBarGaugeBarGaugeTitleComponent extends NestedOption implements O
     }
 
     @Input()
-    get subtitle(): string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap } {
+    get subtitle(): string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap } {
         return this._getOption('subtitle');
     }
-    set subtitle(value: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }) {
+    set subtitle(value: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }) {
         this._setOption('subtitle', value);
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/bar-gauge/nested/legend-title-subtitle.ts b/packages/devextreme-angular/src/ui/bar-gauge/nested/legend-title-subtitle.ts
index 6e3ade8b7b7d..b73ede4123cb 100644
--- a/packages/devextreme-angular/src/ui/bar-gauge/nested/legend-title-subtitle.ts
+++ b/packages/devextreme-angular/src/ui/bar-gauge/nested/legend-title-subtitle.ts
@@ -48,10 +48,10 @@ export class DxoBarGaugeLegendTitleSubtitleComponent extends NestedOption implem
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/bar-gauge/nested/legend-title.ts b/packages/devextreme-angular/src/ui/bar-gauge/nested/legend-title.ts
index ccd18b44b82e..cc10385ecb4f 100644
--- a/packages/devextreme-angular/src/ui/bar-gauge/nested/legend-title.ts
+++ b/packages/devextreme-angular/src/ui/bar-gauge/nested/legend-title.ts
@@ -65,18 +65,18 @@ export class DxoBarGaugeLegendTitleComponent extends NestedOption implements OnD
     }
 
     @Input()
-    get subtitle(): string | { font?: Font, offset?: number, text?: string } {
+    get subtitle(): string | { font?: Font, offset?: number, text?: string | undefined } {
         return this._getOption('subtitle');
     }
-    set subtitle(value: string | { font?: Font, offset?: number, text?: string }) {
+    set subtitle(value: string | { font?: Font, offset?: number, text?: string | undefined }) {
         this._setOption('subtitle', value);
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/bar-gauge/nested/legend.ts b/packages/devextreme-angular/src/ui/bar-gauge/nested/legend.ts
index e31721a2ad47..f8c8abe91bf0 100644
--- a/packages/devextreme-angular/src/ui/bar-gauge/nested/legend.ts
+++ b/packages/devextreme-angular/src/ui/bar-gauge/nested/legend.ts
@@ -195,10 +195,10 @@ export class DxoBarGaugeLegendComponent extends NestedOption implements OnDestro
     }
 
     @Input()
-    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge } {
+    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined }, text?: string | undefined, verticalAlignment?: VerticalEdge } {
         return this._getOption('title');
     }
-    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge }) {
+    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined }, text?: string | undefined, verticalAlignment?: VerticalEdge }) {
         this._setOption('title', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/bar-gauge/nested/subtitle.ts b/packages/devextreme-angular/src/ui/bar-gauge/nested/subtitle.ts
index 34cae02f9c32..ccfdb66c7b05 100644
--- a/packages/devextreme-angular/src/ui/bar-gauge/nested/subtitle.ts
+++ b/packages/devextreme-angular/src/ui/bar-gauge/nested/subtitle.ts
@@ -48,10 +48,10 @@ export class DxoBarGaugeSubtitleComponent extends NestedOption implements OnDest
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/bar-gauge/nested/title.ts b/packages/devextreme-angular/src/ui/bar-gauge/nested/title.ts
index 4fd1e61b68cf..3139c09124bf 100644
--- a/packages/devextreme-angular/src/ui/bar-gauge/nested/title.ts
+++ b/packages/devextreme-angular/src/ui/bar-gauge/nested/title.ts
@@ -65,18 +65,18 @@ export class DxoBarGaugeTitleComponent extends NestedOption implements OnDestroy
     }
 
     @Input()
-    get subtitle(): string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap } {
+    get subtitle(): string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap } {
         return this._getOption('subtitle');
     }
-    set subtitle(value: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }) {
+    set subtitle(value: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }) {
         this._setOption('subtitle', value);
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/calendar/index.ts b/packages/devextreme-angular/src/ui/calendar/index.ts
index 137ebc5bc9f8..798c85241ee3 100644
--- a/packages/devextreme-angular/src/ui/calendar/index.ts
+++ b/packages/devextreme-angular/src/ui/calendar/index.ts
@@ -142,10 +142,10 @@ export class DxCalendarComponent extends DxComponent implements OnDestroy, Contr
     
      */
     @Input()
-    get disabledDates(): Array<Date> | ((data: DisabledDate) => boolean) {
+    get disabledDates(): Array<Date> | ((data: DisabledDate) => boolean) | null {
         return this._getOption('disabledDates');
     }
-    set disabledDates(value: Array<Date> | ((data: DisabledDate) => boolean)) {
+    set disabledDates(value: Array<Date> | ((data: DisabledDate) => boolean) | null) {
         this._setOption('disabledDates', value);
     }
 
@@ -425,10 +425,10 @@ export class DxCalendarComponent extends DxComponent implements OnDestroy, Contr
     
      */
     @Input()
-    get validationError(): any {
+    get validationError(): any | null {
         return this._getOption('validationError');
     }
-    set validationError(value: any) {
+    set validationError(value: any | null) {
         this._setOption('validationError', value);
     }
 
@@ -438,10 +438,10 @@ export class DxCalendarComponent extends DxComponent implements OnDestroy, Contr
     
      */
     @Input()
-    get validationErrors(): Array<any> {
+    get validationErrors(): Array<any> | null {
         return this._getOption('validationErrors');
     }
-    set validationErrors(value: Array<any>) {
+    set validationErrors(value: Array<any> | null) {
         this._setOption('validationErrors', value);
     }
 
@@ -621,7 +621,7 @@ export class DxCalendarComponent extends DxComponent implements OnDestroy, Contr
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() disabledDatesChange: EventEmitter<Array<Date> | ((data: DisabledDate) => boolean)>;
+    @Output() disabledDatesChange: EventEmitter<Array<Date> | ((data: DisabledDate) => boolean) | null>;
 
     /**
     
@@ -775,14 +775,14 @@ export class DxCalendarComponent extends DxComponent implements OnDestroy, Contr
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorChange: EventEmitter<any>;
+    @Output() validationErrorChange: EventEmitter<any | null>;
 
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorsChange: EventEmitter<Array<any>>;
+    @Output() validationErrorsChange: EventEmitter<Array<any> | null>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/card-view/nested/button-options.ts b/packages/devextreme-angular/src/ui/card-view/nested/button-options.ts
index b4795db80cbc..1c5577f3b302 100644
--- a/packages/devextreme-angular/src/ui/card-view/nested/button-options.ts
+++ b/packages/devextreme-angular/src/ui/card-view/nested/button-options.ts
@@ -114,10 +114,10 @@ export class DxoCardViewButtonOptionsComponent extends NestedOption implements A
     }
 
     @Input()
-    get onClick(): ((e: ClickEvent) => void) {
+    get onClick(): ((e: ClickEvent) => void) | undefined {
         return this._getOption('onClick');
     }
-    set onClick(value: ((e: ClickEvent) => void)) {
+    set onClick(value: ((e: ClickEvent) => void) | undefined) {
         this._setOption('onClick', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/card-view/nested/form.ts b/packages/devextreme-angular/src/ui/card-view/nested/form.ts
index 1680882b7393..ac9f83c8805e 100644
--- a/packages/devextreme-angular/src/ui/card-view/nested/form.ts
+++ b/packages/devextreme-angular/src/ui/card-view/nested/form.ts
@@ -223,18 +223,18 @@ export class DxoCardViewFormComponent extends NestedOption implements OnDestroy,
     }
 
     @Input()
-    get onEditorEnterKey(): ((e: EditorEnterKeyEvent) => void) {
+    get onEditorEnterKey(): ((e: EditorEnterKeyEvent) => void) | undefined {
         return this._getOption('onEditorEnterKey');
     }
-    set onEditorEnterKey(value: ((e: EditorEnterKeyEvent) => void)) {
+    set onEditorEnterKey(value: ((e: EditorEnterKeyEvent) => void) | undefined) {
         this._setOption('onEditorEnterKey', value);
     }
 
     @Input()
-    get onFieldDataChanged(): ((e: FieldDataChangedEvent) => void) {
+    get onFieldDataChanged(): ((e: FieldDataChangedEvent) => void) | undefined {
         return this._getOption('onFieldDataChanged');
     }
-    set onFieldDataChanged(value: ((e: FieldDataChangedEvent) => void)) {
+    set onFieldDataChanged(value: ((e: FieldDataChangedEvent) => void) | undefined) {
         this._setOption('onFieldDataChanged', value);
     }
 
@@ -255,18 +255,18 @@ export class DxoCardViewFormComponent extends NestedOption implements OnDestroy,
     }
 
     @Input()
-    get onSmartPasted(): ((e: SmartPastedEvent) => void) {
+    get onSmartPasted(): ((e: SmartPastedEvent) => void) | undefined {
         return this._getOption('onSmartPasted');
     }
-    set onSmartPasted(value: ((e: SmartPastedEvent) => void)) {
+    set onSmartPasted(value: ((e: SmartPastedEvent) => void) | undefined) {
         this._setOption('onSmartPasted', value);
     }
 
     @Input()
-    get onSmartPasting(): ((e: SmartPastingEvent) => void) {
+    get onSmartPasting(): ((e: SmartPastingEvent) => void) | undefined {
         return this._getOption('onSmartPasting');
     }
-    set onSmartPasting(value: ((e: SmartPastingEvent) => void)) {
+    set onSmartPasting(value: ((e: SmartPastingEvent) => void) | undefined) {
         this._setOption('onSmartPasting', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/card-view/nested/tab-panel-options.ts b/packages/devextreme-angular/src/ui/card-view/nested/tab-panel-options.ts
index e14a74b65c55..26ab26ff9f6f 100644
--- a/packages/devextreme-angular/src/ui/card-view/nested/tab-panel-options.ts
+++ b/packages/devextreme-angular/src/ui/card-view/nested/tab-panel-options.ts
@@ -288,18 +288,18 @@ export class DxoCardViewTabPanelOptionsComponent extends NestedOption implements
     }
 
     @Input()
-    get onTitleHold(): ((e: TitleHoldEvent) => void) {
+    get onTitleHold(): ((e: TitleHoldEvent) => void) | undefined {
         return this._getOption('onTitleHold');
     }
-    set onTitleHold(value: ((e: TitleHoldEvent) => void)) {
+    set onTitleHold(value: ((e: TitleHoldEvent) => void) | undefined) {
         this._setOption('onTitleHold', value);
     }
 
     @Input()
-    get onTitleRendered(): ((e: TitleRenderedEvent) => void) {
+    get onTitleRendered(): ((e: TitleRenderedEvent) => void) | undefined {
         return this._getOption('onTitleRendered');
     }
-    set onTitleRendered(value: ((e: TitleRenderedEvent) => void)) {
+    set onTitleRendered(value: ((e: TitleRenderedEvent) => void) | undefined) {
         this._setOption('onTitleRendered', value);
     }
 
@@ -344,10 +344,10 @@ export class DxoCardViewTabPanelOptionsComponent extends NestedOption implements
     }
 
     @Input()
-    get selectedItem(): any {
+    get selectedItem(): any | null {
         return this._getOption('selectedItem');
     }
-    set selectedItem(value: any) {
+    set selectedItem(value: any | null) {
         this._setOption('selectedItem', value);
     }
 
@@ -427,7 +427,7 @@ export class DxoCardViewTabPanelOptionsComponent extends NestedOption implements
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() selectedItemChange: EventEmitter<any>;
+    @Output() selectedItemChange: EventEmitter<any | null>;
     protected get _optionPath() {
         return 'tabPanelOptions';
     }
diff --git a/packages/devextreme-angular/src/ui/chart/index.ts b/packages/devextreme-angular/src/ui/chart/index.ts
index 599d62c62a1c..2132048fdcc5 100644
--- a/packages/devextreme-angular/src/ui/chart/index.ts
+++ b/packages/devextreme-angular/src/ui/chart/index.ts
@@ -346,10 +346,10 @@ export class DxChartComponent extends DxComponent implements OnDestroy, OnChange
     
      */
     @Input()
-    get argumentAxis(): { aggregatedPointsPosition?: AggregatedPointsPosition, aggregationGroupWidth?: number | undefined, aggregationInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, allowDecimals?: boolean | undefined, argumentType?: ChartsDataType | undefined, axisDivisionFactor?: number, breaks?: Array<ScaleBreak> | { endValue?: Date | number | string | undefined, startValue?: Date | number | string | undefined }[], breakStyle?: { color?: string, line?: ScaleBreakLineStyle, width?: number }, categories?: Array<Date | number | string>, color?: string, constantLines?: { color?: string, dashStyle?: DashStyle, displayBehindSeries?: boolean, extendAxis?: boolean, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, position?: RelativePosition, text?: string | undefined, verticalAlignment?: VerticalAlignment, visible?: boolean }, paddingLeftRight?: number, paddingTopBottom?: number, value?: Date | number | string | undefined, width?: number }[], constantLineStyle?: { color?: string, dashStyle?: DashStyle, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, position?: RelativePosition, verticalAlignment?: VerticalAlignment, visible?: boolean }, paddingLeftRight?: number, paddingTopBottom?: number, width?: number }, customPosition?: Date | number | string | undefined, customPositionAxis?: string | undefined, discreteAxisDivisionMode?: DiscreteAxisDivisionMode, endOnTick?: boolean, grid?: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }, holidays?: Array<Date | string> | Array<number>, hoverMode?: ArgumentAxisHoverMode, inverted?: boolean, label?: { alignment?: HorizontalAlignment | undefined, customizeHint?: ((argument: { value: Date | number | string, valueText: string }) => string), customizeText?: ((argument: { value: Date | number | string, valueText: string }) => string), displayMode?: ChartLabelDisplayMode, font?: Font, format?: Format | undefined, indentFromAxis?: number, overlappingBehavior?: ChartsAxisLabelOverlap, position?: Position | RelativePosition, rotationAngle?: number, staggeringSpacing?: number, template?: any, textOverflow?: TextOverflow, visible?: boolean, wordWrap?: WordWrap }, linearThreshold?: number | undefined, logarithmBase?: number, maxValueMargin?: number | undefined, minorGrid?: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }, minorTick?: { color?: string, length?: number, opacity?: number, shift?: number, visible?: boolean, width?: number }, minorTickCount?: number | undefined, minorTickInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, minValueMargin?: number | undefined, minVisualRangeLength?: number | TimeInterval | undefined | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, offset?: number | undefined, opacity?: number | undefined, placeholderSize?: number, position?: Position, singleWorkdays?: Array<Date | string> | Array<number>, strips?: { color?: string | undefined, endValue?: Date | number | string | undefined, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, text?: string | undefined, verticalAlignment?: VerticalAlignment }, paddingLeftRight?: number, paddingTopBottom?: number, startValue?: Date | number | string | undefined }[], stripStyle?: { label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, verticalAlignment?: VerticalAlignment }, paddingLeftRight?: number, paddingTopBottom?: number }, tick?: { color?: string, length?: number, opacity?: number | undefined, shift?: number, visible?: boolean, width?: number }, tickInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, title?: string | { alignment?: HorizontalAlignment, font?: Font, margin?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, type?: AxisScaleType | undefined, valueMarginsEnabled?: boolean, visible?: boolean, visualRange?: Array<Date | number | string> | CommonChartTypes.VisualRange, visualRangeUpdateMode?: VisualRangeUpdateMode, wholeRange?: Array<Date | number | string> | undefined | CommonChartTypes.VisualRange, width?: number, workdaysOnly?: boolean, workWeek?: Array<number> } {
+    get argumentAxis(): { aggregatedPointsPosition?: AggregatedPointsPosition, aggregationGroupWidth?: number | undefined, aggregationInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, allowDecimals?: boolean | undefined, argumentType?: ChartsDataType | undefined, axisDivisionFactor?: number, breaks?: Array<ScaleBreak> | undefined | { endValue?: Date | number | string | undefined, startValue?: Date | number | string | undefined }[], breakStyle?: { color?: string, line?: ScaleBreakLineStyle, width?: number }, categories?: Array<Date | number | string>, color?: string, constantLines?: { color?: string, dashStyle?: DashStyle, displayBehindSeries?: boolean, extendAxis?: boolean, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, position?: RelativePosition, text?: string | undefined, verticalAlignment?: VerticalAlignment, visible?: boolean }, paddingLeftRight?: number, paddingTopBottom?: number, value?: Date | number | string | undefined, width?: number }[], constantLineStyle?: { color?: string, dashStyle?: DashStyle, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, position?: RelativePosition, verticalAlignment?: VerticalAlignment, visible?: boolean }, paddingLeftRight?: number, paddingTopBottom?: number, width?: number }, customPosition?: Date | number | string | undefined, customPositionAxis?: string | undefined, discreteAxisDivisionMode?: DiscreteAxisDivisionMode, endOnTick?: boolean, grid?: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }, holidays?: Array<Date | string> | Array<number> | undefined, hoverMode?: ArgumentAxisHoverMode, inverted?: boolean, label?: { alignment?: HorizontalAlignment | undefined, customizeHint?: ((argument: { value: Date | number | string, valueText: string }) => string), customizeText?: ((argument: { value: Date | number | string, valueText: string }) => string), displayMode?: ChartLabelDisplayMode, font?: Font, format?: Format | undefined, indentFromAxis?: number, overlappingBehavior?: ChartsAxisLabelOverlap, position?: Position | RelativePosition, rotationAngle?: number, staggeringSpacing?: number, template?: any, textOverflow?: TextOverflow, visible?: boolean, wordWrap?: WordWrap }, linearThreshold?: number | undefined, logarithmBase?: number, maxValueMargin?: number | undefined, minorGrid?: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }, minorTick?: { color?: string, length?: number, opacity?: number, shift?: number, visible?: boolean, width?: number }, minorTickCount?: number | undefined, minorTickInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, minValueMargin?: number | undefined, minVisualRangeLength?: number | TimeInterval | undefined | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, offset?: number | undefined, opacity?: number | undefined, placeholderSize?: null | number, position?: Position, singleWorkdays?: Array<Date | string> | Array<number> | undefined, strips?: { color?: string | undefined, endValue?: Date | number | string | undefined, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, text?: string | undefined, verticalAlignment?: VerticalAlignment }, paddingLeftRight?: number, paddingTopBottom?: number, startValue?: Date | number | string | undefined }[], stripStyle?: { label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, verticalAlignment?: VerticalAlignment }, paddingLeftRight?: number, paddingTopBottom?: number }, tick?: { color?: string, length?: number, opacity?: number | undefined, shift?: number, visible?: boolean, width?: number }, tickInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, title?: string | { alignment?: HorizontalAlignment, font?: Font, margin?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, type?: AxisScaleType | undefined, valueMarginsEnabled?: boolean, visible?: boolean, visualRange?: Array<Date | number | string> | CommonChartTypes.VisualRange, visualRangeUpdateMode?: VisualRangeUpdateMode, wholeRange?: Array<Date | number | string> | undefined | CommonChartTypes.VisualRange, width?: number, workdaysOnly?: boolean, workWeek?: Array<number> } {
         return this._getOption('argumentAxis');
     }
-    set argumentAxis(value: { aggregatedPointsPosition?: AggregatedPointsPosition, aggregationGroupWidth?: number | undefined, aggregationInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, allowDecimals?: boolean | undefined, argumentType?: ChartsDataType | undefined, axisDivisionFactor?: number, breaks?: Array<ScaleBreak> | { endValue?: Date | number | string | undefined, startValue?: Date | number | string | undefined }[], breakStyle?: { color?: string, line?: ScaleBreakLineStyle, width?: number }, categories?: Array<Date | number | string>, color?: string, constantLines?: { color?: string, dashStyle?: DashStyle, displayBehindSeries?: boolean, extendAxis?: boolean, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, position?: RelativePosition, text?: string | undefined, verticalAlignment?: VerticalAlignment, visible?: boolean }, paddingLeftRight?: number, paddingTopBottom?: number, value?: Date | number | string | undefined, width?: number }[], constantLineStyle?: { color?: string, dashStyle?: DashStyle, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, position?: RelativePosition, verticalAlignment?: VerticalAlignment, visible?: boolean }, paddingLeftRight?: number, paddingTopBottom?: number, width?: number }, customPosition?: Date | number | string | undefined, customPositionAxis?: string | undefined, discreteAxisDivisionMode?: DiscreteAxisDivisionMode, endOnTick?: boolean, grid?: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }, holidays?: Array<Date | string> | Array<number>, hoverMode?: ArgumentAxisHoverMode, inverted?: boolean, label?: { alignment?: HorizontalAlignment | undefined, customizeHint?: ((argument: { value: Date | number | string, valueText: string }) => string), customizeText?: ((argument: { value: Date | number | string, valueText: string }) => string), displayMode?: ChartLabelDisplayMode, font?: Font, format?: Format | undefined, indentFromAxis?: number, overlappingBehavior?: ChartsAxisLabelOverlap, position?: Position | RelativePosition, rotationAngle?: number, staggeringSpacing?: number, template?: any, textOverflow?: TextOverflow, visible?: boolean, wordWrap?: WordWrap }, linearThreshold?: number | undefined, logarithmBase?: number, maxValueMargin?: number | undefined, minorGrid?: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }, minorTick?: { color?: string, length?: number, opacity?: number, shift?: number, visible?: boolean, width?: number }, minorTickCount?: number | undefined, minorTickInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, minValueMargin?: number | undefined, minVisualRangeLength?: number | TimeInterval | undefined | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, offset?: number | undefined, opacity?: number | undefined, placeholderSize?: number, position?: Position, singleWorkdays?: Array<Date | string> | Array<number>, strips?: { color?: string | undefined, endValue?: Date | number | string | undefined, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, text?: string | undefined, verticalAlignment?: VerticalAlignment }, paddingLeftRight?: number, paddingTopBottom?: number, startValue?: Date | number | string | undefined }[], stripStyle?: { label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, verticalAlignment?: VerticalAlignment }, paddingLeftRight?: number, paddingTopBottom?: number }, tick?: { color?: string, length?: number, opacity?: number | undefined, shift?: number, visible?: boolean, width?: number }, tickInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, title?: string | { alignment?: HorizontalAlignment, font?: Font, margin?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, type?: AxisScaleType | undefined, valueMarginsEnabled?: boolean, visible?: boolean, visualRange?: Array<Date | number | string> | CommonChartTypes.VisualRange, visualRangeUpdateMode?: VisualRangeUpdateMode, wholeRange?: Array<Date | number | string> | undefined | CommonChartTypes.VisualRange, width?: number, workdaysOnly?: boolean, workWeek?: Array<number> }) {
+    set argumentAxis(value: { aggregatedPointsPosition?: AggregatedPointsPosition, aggregationGroupWidth?: number | undefined, aggregationInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, allowDecimals?: boolean | undefined, argumentType?: ChartsDataType | undefined, axisDivisionFactor?: number, breaks?: Array<ScaleBreak> | undefined | { endValue?: Date | number | string | undefined, startValue?: Date | number | string | undefined }[], breakStyle?: { color?: string, line?: ScaleBreakLineStyle, width?: number }, categories?: Array<Date | number | string>, color?: string, constantLines?: { color?: string, dashStyle?: DashStyle, displayBehindSeries?: boolean, extendAxis?: boolean, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, position?: RelativePosition, text?: string | undefined, verticalAlignment?: VerticalAlignment, visible?: boolean }, paddingLeftRight?: number, paddingTopBottom?: number, value?: Date | number | string | undefined, width?: number }[], constantLineStyle?: { color?: string, dashStyle?: DashStyle, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, position?: RelativePosition, verticalAlignment?: VerticalAlignment, visible?: boolean }, paddingLeftRight?: number, paddingTopBottom?: number, width?: number }, customPosition?: Date | number | string | undefined, customPositionAxis?: string | undefined, discreteAxisDivisionMode?: DiscreteAxisDivisionMode, endOnTick?: boolean, grid?: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }, holidays?: Array<Date | string> | Array<number> | undefined, hoverMode?: ArgumentAxisHoverMode, inverted?: boolean, label?: { alignment?: HorizontalAlignment | undefined, customizeHint?: ((argument: { value: Date | number | string, valueText: string }) => string), customizeText?: ((argument: { value: Date | number | string, valueText: string }) => string), displayMode?: ChartLabelDisplayMode, font?: Font, format?: Format | undefined, indentFromAxis?: number, overlappingBehavior?: ChartsAxisLabelOverlap, position?: Position | RelativePosition, rotationAngle?: number, staggeringSpacing?: number, template?: any, textOverflow?: TextOverflow, visible?: boolean, wordWrap?: WordWrap }, linearThreshold?: number | undefined, logarithmBase?: number, maxValueMargin?: number | undefined, minorGrid?: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }, minorTick?: { color?: string, length?: number, opacity?: number, shift?: number, visible?: boolean, width?: number }, minorTickCount?: number | undefined, minorTickInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, minValueMargin?: number | undefined, minVisualRangeLength?: number | TimeInterval | undefined | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, offset?: number | undefined, opacity?: number | undefined, placeholderSize?: null | number, position?: Position, singleWorkdays?: Array<Date | string> | Array<number> | undefined, strips?: { color?: string | undefined, endValue?: Date | number | string | undefined, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, text?: string | undefined, verticalAlignment?: VerticalAlignment }, paddingLeftRight?: number, paddingTopBottom?: number, startValue?: Date | number | string | undefined }[], stripStyle?: { label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, verticalAlignment?: VerticalAlignment }, paddingLeftRight?: number, paddingTopBottom?: number }, tick?: { color?: string, length?: number, opacity?: number | undefined, shift?: number, visible?: boolean, width?: number }, tickInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, title?: string | { alignment?: HorizontalAlignment, font?: Font, margin?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, type?: AxisScaleType | undefined, valueMarginsEnabled?: boolean, visible?: boolean, visualRange?: Array<Date | number | string> | CommonChartTypes.VisualRange, visualRangeUpdateMode?: VisualRangeUpdateMode, wholeRange?: Array<Date | number | string> | undefined | CommonChartTypes.VisualRange, width?: number, workdaysOnly?: boolean, workWeek?: Array<number> }) {
         this._setOption('argumentAxis', value);
     }
 
@@ -411,10 +411,10 @@ export class DxChartComponent extends DxComponent implements OnDestroy, OnChange
     
      */
     @Input()
-    get commonAxisSettings(): { aggregatedPointsPosition?: AggregatedPointsPosition, allowDecimals?: boolean | undefined, breakStyle?: { color?: string, line?: ScaleBreakLineStyle, width?: number }, color?: string, constantLineStyle?: { color?: string, dashStyle?: DashStyle, label?: { font?: Font, position?: RelativePosition, visible?: boolean }, paddingLeftRight?: number, paddingTopBottom?: number, width?: number }, discreteAxisDivisionMode?: DiscreteAxisDivisionMode, endOnTick?: boolean | undefined, grid?: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }, inverted?: boolean, label?: { alignment?: HorizontalAlignment | undefined, displayMode?: ChartLabelDisplayMode, font?: Font, indentFromAxis?: number, overlappingBehavior?: ChartsAxisLabelOverlap, position?: Position | RelativePosition, rotationAngle?: number, staggeringSpacing?: number, template?: any, textOverflow?: TextOverflow, visible?: boolean, wordWrap?: WordWrap }, maxValueMargin?: number | undefined, minorGrid?: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }, minorTick?: { color?: string, length?: number, opacity?: number, shift?: number, visible?: boolean, width?: number }, minValueMargin?: number | undefined, opacity?: number | undefined, placeholderSize?: number, stripStyle?: { label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, verticalAlignment?: VerticalAlignment }, paddingLeftRight?: number, paddingTopBottom?: number }, tick?: { color?: string, length?: number, opacity?: number | undefined, shift?: number, visible?: boolean, width?: number }, title?: { alignment?: HorizontalAlignment, font?: Font, margin?: number, textOverflow?: TextOverflow, wordWrap?: WordWrap }, valueMarginsEnabled?: boolean, visible?: boolean, width?: number } {
+    get commonAxisSettings(): { aggregatedPointsPosition?: AggregatedPointsPosition, allowDecimals?: boolean | undefined, breakStyle?: { color?: string, line?: ScaleBreakLineStyle, width?: number }, color?: string, constantLineStyle?: { color?: string, dashStyle?: DashStyle, label?: { font?: Font, position?: RelativePosition, visible?: boolean }, paddingLeftRight?: number, paddingTopBottom?: number, width?: number }, discreteAxisDivisionMode?: DiscreteAxisDivisionMode, endOnTick?: boolean | undefined, grid?: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }, inverted?: boolean, label?: { alignment?: HorizontalAlignment | undefined, displayMode?: ChartLabelDisplayMode, font?: Font, indentFromAxis?: number, overlappingBehavior?: ChartsAxisLabelOverlap, position?: Position | RelativePosition, rotationAngle?: number, staggeringSpacing?: number, template?: any, textOverflow?: TextOverflow, visible?: boolean, wordWrap?: WordWrap }, maxValueMargin?: number | undefined, minorGrid?: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }, minorTick?: { color?: string, length?: number, opacity?: number, shift?: number, visible?: boolean, width?: number }, minValueMargin?: number | undefined, opacity?: number | undefined, placeholderSize?: null | number, stripStyle?: { label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, verticalAlignment?: VerticalAlignment }, paddingLeftRight?: number, paddingTopBottom?: number }, tick?: { color?: string, length?: number, opacity?: number | undefined, shift?: number, visible?: boolean, width?: number }, title?: { alignment?: HorizontalAlignment, font?: Font, margin?: number, textOverflow?: TextOverflow, wordWrap?: WordWrap }, valueMarginsEnabled?: boolean, visible?: boolean, width?: number } {
         return this._getOption('commonAxisSettings');
     }
-    set commonAxisSettings(value: { aggregatedPointsPosition?: AggregatedPointsPosition, allowDecimals?: boolean | undefined, breakStyle?: { color?: string, line?: ScaleBreakLineStyle, width?: number }, color?: string, constantLineStyle?: { color?: string, dashStyle?: DashStyle, label?: { font?: Font, position?: RelativePosition, visible?: boolean }, paddingLeftRight?: number, paddingTopBottom?: number, width?: number }, discreteAxisDivisionMode?: DiscreteAxisDivisionMode, endOnTick?: boolean | undefined, grid?: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }, inverted?: boolean, label?: { alignment?: HorizontalAlignment | undefined, displayMode?: ChartLabelDisplayMode, font?: Font, indentFromAxis?: number, overlappingBehavior?: ChartsAxisLabelOverlap, position?: Position | RelativePosition, rotationAngle?: number, staggeringSpacing?: number, template?: any, textOverflow?: TextOverflow, visible?: boolean, wordWrap?: WordWrap }, maxValueMargin?: number | undefined, minorGrid?: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }, minorTick?: { color?: string, length?: number, opacity?: number, shift?: number, visible?: boolean, width?: number }, minValueMargin?: number | undefined, opacity?: number | undefined, placeholderSize?: number, stripStyle?: { label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, verticalAlignment?: VerticalAlignment }, paddingLeftRight?: number, paddingTopBottom?: number }, tick?: { color?: string, length?: number, opacity?: number | undefined, shift?: number, visible?: boolean, width?: number }, title?: { alignment?: HorizontalAlignment, font?: Font, margin?: number, textOverflow?: TextOverflow, wordWrap?: WordWrap }, valueMarginsEnabled?: boolean, visible?: boolean, width?: number }) {
+    set commonAxisSettings(value: { aggregatedPointsPosition?: AggregatedPointsPosition, allowDecimals?: boolean | undefined, breakStyle?: { color?: string, line?: ScaleBreakLineStyle, width?: number }, color?: string, constantLineStyle?: { color?: string, dashStyle?: DashStyle, label?: { font?: Font, position?: RelativePosition, visible?: boolean }, paddingLeftRight?: number, paddingTopBottom?: number, width?: number }, discreteAxisDivisionMode?: DiscreteAxisDivisionMode, endOnTick?: boolean | undefined, grid?: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }, inverted?: boolean, label?: { alignment?: HorizontalAlignment | undefined, displayMode?: ChartLabelDisplayMode, font?: Font, indentFromAxis?: number, overlappingBehavior?: ChartsAxisLabelOverlap, position?: Position | RelativePosition, rotationAngle?: number, staggeringSpacing?: number, template?: any, textOverflow?: TextOverflow, visible?: boolean, wordWrap?: WordWrap }, maxValueMargin?: number | undefined, minorGrid?: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }, minorTick?: { color?: string, length?: number, opacity?: number, shift?: number, visible?: boolean, width?: number }, minValueMargin?: number | undefined, opacity?: number | undefined, placeholderSize?: null | number, stripStyle?: { label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, verticalAlignment?: VerticalAlignment }, paddingLeftRight?: number, paddingTopBottom?: number }, tick?: { color?: string, length?: number, opacity?: number | undefined, shift?: number, visible?: boolean, width?: number }, title?: { alignment?: HorizontalAlignment, font?: Font, margin?: number, textOverflow?: TextOverflow, wordWrap?: WordWrap }, valueMarginsEnabled?: boolean, visible?: boolean, width?: number }) {
         this._setOption('commonAxisSettings', value);
     }
 
@@ -593,10 +593,10 @@ export class DxChartComponent extends DxComponent implements OnDestroy, OnChange
     
      */
     @Input()
-    get legend(): { backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((seriesInfo: { seriesColor: string, seriesIndex: number, seriesName: any }) => string), customizeItems?: ((items: Array<LegendItem>) => Array<LegendItem>), customizeText?: ((seriesInfo: { seriesColor: string, seriesIndex: number, seriesName: any }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, hoverMode?: LegendHoverMode, itemsAlignment?: HorizontalAlignment | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, position?: RelativePosition, rowCount?: number, rowItemSpacing?: number, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean } {
+    get legend(): { backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((seriesInfo: { seriesColor: string, seriesIndex: number, seriesName: any }) => string), customizeItems?: ((items: Array<LegendItem>) => Array<LegendItem>), customizeText?: ((seriesInfo: { seriesColor: string, seriesIndex: number, seriesName: any }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, hoverMode?: LegendHoverMode, itemsAlignment?: HorizontalAlignment | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, position?: RelativePosition, rowCount?: number, rowItemSpacing?: number, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined }, text?: string | undefined, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean } {
         return this._getOption('legend');
     }
-    set legend(value: { backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((seriesInfo: { seriesColor: string, seriesIndex: number, seriesName: any }) => string), customizeItems?: ((items: Array<LegendItem>) => Array<LegendItem>), customizeText?: ((seriesInfo: { seriesColor: string, seriesIndex: number, seriesName: any }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, hoverMode?: LegendHoverMode, itemsAlignment?: HorizontalAlignment | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, position?: RelativePosition, rowCount?: number, rowItemSpacing?: number, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean }) {
+    set legend(value: { backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((seriesInfo: { seriesColor: string, seriesIndex: number, seriesName: any }) => string), customizeItems?: ((items: Array<LegendItem>) => Array<LegendItem>), customizeText?: ((seriesInfo: { seriesColor: string, seriesIndex: number, seriesName: any }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, hoverMode?: LegendHoverMode, itemsAlignment?: HorizontalAlignment | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, position?: RelativePosition, rowCount?: number, rowItemSpacing?: number, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined }, text?: string | undefined, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean }) {
         this._setOption('legend', value);
     }
 
@@ -905,10 +905,10 @@ export class DxChartComponent extends DxComponent implements OnDestroy, OnChange
     
      */
     @Input()
-    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap } {
+    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string | undefined, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap } {
         return this._getOption('title');
     }
-    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }) {
+    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string | undefined, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }) {
         this._setOption('title', value);
     }
 
@@ -931,10 +931,10 @@ export class DxChartComponent extends DxComponent implements OnDestroy, OnChange
     
      */
     @Input()
-    get valueAxis(): { aggregatedPointsPosition?: AggregatedPointsPosition, allowDecimals?: boolean | undefined, autoBreaksEnabled?: boolean, axisDivisionFactor?: number, breaks?: Array<ScaleBreak> | { endValue?: Date | number | string | undefined, startValue?: Date | number | string | undefined }[], breakStyle?: { color?: string, line?: ScaleBreakLineStyle, width?: number }, categories?: Array<Date | number | string>, color?: string, constantLines?: { color?: string, dashStyle?: DashStyle, displayBehindSeries?: boolean, extendAxis?: boolean, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, position?: RelativePosition, text?: string | undefined, verticalAlignment?: VerticalAlignment, visible?: boolean }, paddingLeftRight?: number, paddingTopBottom?: number, value?: Date | number | string | undefined, width?: number }[], constantLineStyle?: { color?: string, dashStyle?: DashStyle, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, position?: RelativePosition, verticalAlignment?: VerticalAlignment, visible?: boolean }, paddingLeftRight?: number, paddingTopBottom?: number, width?: number }, customPosition?: Date | number | string | undefined, discreteAxisDivisionMode?: DiscreteAxisDivisionMode, endOnTick?: boolean | undefined, grid?: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }, inverted?: boolean, label?: { alignment?: HorizontalAlignment | undefined, customizeHint?: ((axisValue: { value: Date | number | string, valueText: string }) => string), customizeText?: ((axisValue: { value: Date | number | string, valueText: string }) => string), displayMode?: ChartLabelDisplayMode, font?: Font, format?: Format | undefined, indentFromAxis?: number, overlappingBehavior?: ChartsAxisLabelOverlap, position?: Position | RelativePosition, rotationAngle?: number, staggeringSpacing?: number, template?: any, textOverflow?: TextOverflow, visible?: boolean, wordWrap?: WordWrap }, linearThreshold?: number | undefined, logarithmBase?: number, maxAutoBreakCount?: number, maxValueMargin?: number | undefined, minorGrid?: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }, minorTick?: { color?: string, length?: number, opacity?: number, shift?: number, visible?: boolean, width?: number }, minorTickCount?: number | undefined, minorTickInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, minValueMargin?: number | undefined, minVisualRangeLength?: number | TimeInterval | undefined | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, multipleAxesSpacing?: number, name?: string | undefined, offset?: number | undefined, opacity?: number | undefined, pane?: string | undefined, placeholderSize?: number, position?: Position, showZero?: boolean | undefined, strips?: { color?: string | undefined, endValue?: Date | number | string | undefined, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, text?: string | undefined, verticalAlignment?: VerticalAlignment }, paddingLeftRight?: number, paddingTopBottom?: number, startValue?: Date | number | string | undefined }[], stripStyle?: { label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, verticalAlignment?: VerticalAlignment }, paddingLeftRight?: number, paddingTopBottom?: number }, synchronizedValue?: number | undefined, tick?: { color?: string, length?: number, opacity?: number | undefined, shift?: number, visible?: boolean, width?: number }, tickInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, title?: string | { alignment?: HorizontalAlignment, font?: Font, margin?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, type?: AxisScaleType | undefined, valueMarginsEnabled?: boolean, valueType?: ChartsDataType | undefined, visible?: boolean, visualRange?: Array<Date | number | string> | CommonChartTypes.VisualRange, visualRangeUpdateMode?: ValueAxisVisualRangeUpdateMode, wholeRange?: Array<Date | number | string> | undefined | CommonChartTypes.VisualRange, width?: number }[] {
+    get valueAxis(): { aggregatedPointsPosition?: AggregatedPointsPosition, allowDecimals?: boolean | undefined, autoBreaksEnabled?: boolean, axisDivisionFactor?: number, breaks?: Array<ScaleBreak> | undefined | { endValue?: Date | number | string | undefined, startValue?: Date | number | string | undefined }[], breakStyle?: { color?: string, line?: ScaleBreakLineStyle, width?: number }, categories?: Array<Date | number | string>, color?: string, constantLines?: { color?: string, dashStyle?: DashStyle, displayBehindSeries?: boolean, extendAxis?: boolean, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, position?: RelativePosition, text?: string | undefined, verticalAlignment?: VerticalAlignment, visible?: boolean }, paddingLeftRight?: number, paddingTopBottom?: number, value?: Date | number | string | undefined, width?: number }[], constantLineStyle?: { color?: string, dashStyle?: DashStyle, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, position?: RelativePosition, verticalAlignment?: VerticalAlignment, visible?: boolean }, paddingLeftRight?: number, paddingTopBottom?: number, width?: number }, customPosition?: Date | number | string | undefined, discreteAxisDivisionMode?: DiscreteAxisDivisionMode, endOnTick?: boolean | undefined, grid?: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }, inverted?: boolean, label?: { alignment?: HorizontalAlignment | undefined, customizeHint?: ((axisValue: { value: Date | number | string, valueText: string }) => string), customizeText?: ((axisValue: { value: Date | number | string, valueText: string }) => string), displayMode?: ChartLabelDisplayMode, font?: Font, format?: Format | undefined, indentFromAxis?: number, overlappingBehavior?: ChartsAxisLabelOverlap, position?: Position | RelativePosition, rotationAngle?: number, staggeringSpacing?: number, template?: any, textOverflow?: TextOverflow, visible?: boolean, wordWrap?: WordWrap }, linearThreshold?: number | undefined, logarithmBase?: number, maxAutoBreakCount?: number, maxValueMargin?: number | undefined, minorGrid?: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }, minorTick?: { color?: string, length?: number, opacity?: number, shift?: number, visible?: boolean, width?: number }, minorTickCount?: number | undefined, minorTickInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, minValueMargin?: number | undefined, minVisualRangeLength?: number | TimeInterval | undefined | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, multipleAxesSpacing?: number, name?: string | undefined, offset?: number | undefined, opacity?: number | undefined, pane?: string | undefined, placeholderSize?: null | number, position?: Position, showZero?: boolean | undefined, strips?: { color?: string | undefined, endValue?: Date | number | string | undefined, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, text?: string | undefined, verticalAlignment?: VerticalAlignment }, paddingLeftRight?: number, paddingTopBottom?: number, startValue?: Date | number | string | undefined }[], stripStyle?: { label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, verticalAlignment?: VerticalAlignment }, paddingLeftRight?: number, paddingTopBottom?: number }, synchronizedValue?: number | undefined, tick?: { color?: string, length?: number, opacity?: number | undefined, shift?: number, visible?: boolean, width?: number }, tickInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, title?: string | { alignment?: HorizontalAlignment, font?: Font, margin?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, type?: AxisScaleType | undefined, valueMarginsEnabled?: boolean, valueType?: ChartsDataType | undefined, visible?: boolean, visualRange?: Array<Date | number | string> | CommonChartTypes.VisualRange, visualRangeUpdateMode?: ValueAxisVisualRangeUpdateMode, wholeRange?: Array<Date | number | string> | undefined | CommonChartTypes.VisualRange, width?: number }[] {
         return this._getOption('valueAxis');
     }
-    set valueAxis(value: { aggregatedPointsPosition?: AggregatedPointsPosition, allowDecimals?: boolean | undefined, autoBreaksEnabled?: boolean, axisDivisionFactor?: number, breaks?: Array<ScaleBreak> | { endValue?: Date | number | string | undefined, startValue?: Date | number | string | undefined }[], breakStyle?: { color?: string, line?: ScaleBreakLineStyle, width?: number }, categories?: Array<Date | number | string>, color?: string, constantLines?: { color?: string, dashStyle?: DashStyle, displayBehindSeries?: boolean, extendAxis?: boolean, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, position?: RelativePosition, text?: string | undefined, verticalAlignment?: VerticalAlignment, visible?: boolean }, paddingLeftRight?: number, paddingTopBottom?: number, value?: Date | number | string | undefined, width?: number }[], constantLineStyle?: { color?: string, dashStyle?: DashStyle, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, position?: RelativePosition, verticalAlignment?: VerticalAlignment, visible?: boolean }, paddingLeftRight?: number, paddingTopBottom?: number, width?: number }, customPosition?: Date | number | string | undefined, discreteAxisDivisionMode?: DiscreteAxisDivisionMode, endOnTick?: boolean | undefined, grid?: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }, inverted?: boolean, label?: { alignment?: HorizontalAlignment | undefined, customizeHint?: ((axisValue: { value: Date | number | string, valueText: string }) => string), customizeText?: ((axisValue: { value: Date | number | string, valueText: string }) => string), displayMode?: ChartLabelDisplayMode, font?: Font, format?: Format | undefined, indentFromAxis?: number, overlappingBehavior?: ChartsAxisLabelOverlap, position?: Position | RelativePosition, rotationAngle?: number, staggeringSpacing?: number, template?: any, textOverflow?: TextOverflow, visible?: boolean, wordWrap?: WordWrap }, linearThreshold?: number | undefined, logarithmBase?: number, maxAutoBreakCount?: number, maxValueMargin?: number | undefined, minorGrid?: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }, minorTick?: { color?: string, length?: number, opacity?: number, shift?: number, visible?: boolean, width?: number }, minorTickCount?: number | undefined, minorTickInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, minValueMargin?: number | undefined, minVisualRangeLength?: number | TimeInterval | undefined | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, multipleAxesSpacing?: number, name?: string | undefined, offset?: number | undefined, opacity?: number | undefined, pane?: string | undefined, placeholderSize?: number, position?: Position, showZero?: boolean | undefined, strips?: { color?: string | undefined, endValue?: Date | number | string | undefined, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, text?: string | undefined, verticalAlignment?: VerticalAlignment }, paddingLeftRight?: number, paddingTopBottom?: number, startValue?: Date | number | string | undefined }[], stripStyle?: { label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, verticalAlignment?: VerticalAlignment }, paddingLeftRight?: number, paddingTopBottom?: number }, synchronizedValue?: number | undefined, tick?: { color?: string, length?: number, opacity?: number | undefined, shift?: number, visible?: boolean, width?: number }, tickInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, title?: string | { alignment?: HorizontalAlignment, font?: Font, margin?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, type?: AxisScaleType | undefined, valueMarginsEnabled?: boolean, valueType?: ChartsDataType | undefined, visible?: boolean, visualRange?: Array<Date | number | string> | CommonChartTypes.VisualRange, visualRangeUpdateMode?: ValueAxisVisualRangeUpdateMode, wholeRange?: Array<Date | number | string> | undefined | CommonChartTypes.VisualRange, width?: number }[]) {
+    set valueAxis(value: { aggregatedPointsPosition?: AggregatedPointsPosition, allowDecimals?: boolean | undefined, autoBreaksEnabled?: boolean, axisDivisionFactor?: number, breaks?: Array<ScaleBreak> | undefined | { endValue?: Date | number | string | undefined, startValue?: Date | number | string | undefined }[], breakStyle?: { color?: string, line?: ScaleBreakLineStyle, width?: number }, categories?: Array<Date | number | string>, color?: string, constantLines?: { color?: string, dashStyle?: DashStyle, displayBehindSeries?: boolean, extendAxis?: boolean, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, position?: RelativePosition, text?: string | undefined, verticalAlignment?: VerticalAlignment, visible?: boolean }, paddingLeftRight?: number, paddingTopBottom?: number, value?: Date | number | string | undefined, width?: number }[], constantLineStyle?: { color?: string, dashStyle?: DashStyle, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, position?: RelativePosition, verticalAlignment?: VerticalAlignment, visible?: boolean }, paddingLeftRight?: number, paddingTopBottom?: number, width?: number }, customPosition?: Date | number | string | undefined, discreteAxisDivisionMode?: DiscreteAxisDivisionMode, endOnTick?: boolean | undefined, grid?: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }, inverted?: boolean, label?: { alignment?: HorizontalAlignment | undefined, customizeHint?: ((axisValue: { value: Date | number | string, valueText: string }) => string), customizeText?: ((axisValue: { value: Date | number | string, valueText: string }) => string), displayMode?: ChartLabelDisplayMode, font?: Font, format?: Format | undefined, indentFromAxis?: number, overlappingBehavior?: ChartsAxisLabelOverlap, position?: Position | RelativePosition, rotationAngle?: number, staggeringSpacing?: number, template?: any, textOverflow?: TextOverflow, visible?: boolean, wordWrap?: WordWrap }, linearThreshold?: number | undefined, logarithmBase?: number, maxAutoBreakCount?: number, maxValueMargin?: number | undefined, minorGrid?: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }, minorTick?: { color?: string, length?: number, opacity?: number, shift?: number, visible?: boolean, width?: number }, minorTickCount?: number | undefined, minorTickInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, minValueMargin?: number | undefined, minVisualRangeLength?: number | TimeInterval | undefined | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, multipleAxesSpacing?: number, name?: string | undefined, offset?: number | undefined, opacity?: number | undefined, pane?: string | undefined, placeholderSize?: null | number, position?: Position, showZero?: boolean | undefined, strips?: { color?: string | undefined, endValue?: Date | number | string | undefined, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, text?: string | undefined, verticalAlignment?: VerticalAlignment }, paddingLeftRight?: number, paddingTopBottom?: number, startValue?: Date | number | string | undefined }[], stripStyle?: { label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, verticalAlignment?: VerticalAlignment }, paddingLeftRight?: number, paddingTopBottom?: number }, synchronizedValue?: number | undefined, tick?: { color?: string, length?: number, opacity?: number | undefined, shift?: number, visible?: boolean, width?: number }, tickInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, title?: string | { alignment?: HorizontalAlignment, font?: Font, margin?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, type?: AxisScaleType | undefined, valueMarginsEnabled?: boolean, valueType?: ChartsDataType | undefined, visible?: boolean, visualRange?: Array<Date | number | string> | CommonChartTypes.VisualRange, visualRangeUpdateMode?: ValueAxisVisualRangeUpdateMode, wholeRange?: Array<Date | number | string> | undefined | CommonChartTypes.VisualRange, width?: number }[]) {
         this._setOption('valueAxis', value);
     }
 
@@ -1152,7 +1152,7 @@ export class DxChartComponent extends DxComponent implements OnDestroy, OnChange
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() argumentAxisChange: EventEmitter<{ aggregatedPointsPosition?: AggregatedPointsPosition, aggregationGroupWidth?: number | undefined, aggregationInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, allowDecimals?: boolean | undefined, argumentType?: ChartsDataType | undefined, axisDivisionFactor?: number, breaks?: Array<ScaleBreak> | { endValue?: Date | number | string | undefined, startValue?: Date | number | string | undefined }[], breakStyle?: { color?: string, line?: ScaleBreakLineStyle, width?: number }, categories?: Array<Date | number | string>, color?: string, constantLines?: { color?: string, dashStyle?: DashStyle, displayBehindSeries?: boolean, extendAxis?: boolean, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, position?: RelativePosition, text?: string | undefined, verticalAlignment?: VerticalAlignment, visible?: boolean }, paddingLeftRight?: number, paddingTopBottom?: number, value?: Date | number | string | undefined, width?: number }[], constantLineStyle?: { color?: string, dashStyle?: DashStyle, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, position?: RelativePosition, verticalAlignment?: VerticalAlignment, visible?: boolean }, paddingLeftRight?: number, paddingTopBottom?: number, width?: number }, customPosition?: Date | number | string | undefined, customPositionAxis?: string | undefined, discreteAxisDivisionMode?: DiscreteAxisDivisionMode, endOnTick?: boolean, grid?: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }, holidays?: Array<Date | string> | Array<number>, hoverMode?: ArgumentAxisHoverMode, inverted?: boolean, label?: { alignment?: HorizontalAlignment | undefined, customizeHint?: ((argument: { value: Date | number | string, valueText: string }) => string), customizeText?: ((argument: { value: Date | number | string, valueText: string }) => string), displayMode?: ChartLabelDisplayMode, font?: Font, format?: Format | undefined, indentFromAxis?: number, overlappingBehavior?: ChartsAxisLabelOverlap, position?: Position | RelativePosition, rotationAngle?: number, staggeringSpacing?: number, template?: any, textOverflow?: TextOverflow, visible?: boolean, wordWrap?: WordWrap }, linearThreshold?: number | undefined, logarithmBase?: number, maxValueMargin?: number | undefined, minorGrid?: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }, minorTick?: { color?: string, length?: number, opacity?: number, shift?: number, visible?: boolean, width?: number }, minorTickCount?: number | undefined, minorTickInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, minValueMargin?: number | undefined, minVisualRangeLength?: number | TimeInterval | undefined | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, offset?: number | undefined, opacity?: number | undefined, placeholderSize?: number, position?: Position, singleWorkdays?: Array<Date | string> | Array<number>, strips?: { color?: string | undefined, endValue?: Date | number | string | undefined, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, text?: string | undefined, verticalAlignment?: VerticalAlignment }, paddingLeftRight?: number, paddingTopBottom?: number, startValue?: Date | number | string | undefined }[], stripStyle?: { label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, verticalAlignment?: VerticalAlignment }, paddingLeftRight?: number, paddingTopBottom?: number }, tick?: { color?: string, length?: number, opacity?: number | undefined, shift?: number, visible?: boolean, width?: number }, tickInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, title?: string | { alignment?: HorizontalAlignment, font?: Font, margin?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, type?: AxisScaleType | undefined, valueMarginsEnabled?: boolean, visible?: boolean, visualRange?: Array<Date | number | string> | CommonChartTypes.VisualRange, visualRangeUpdateMode?: VisualRangeUpdateMode, wholeRange?: Array<Date | number | string> | undefined | CommonChartTypes.VisualRange, width?: number, workdaysOnly?: boolean, workWeek?: Array<number> }>;
+    @Output() argumentAxisChange: EventEmitter<{ aggregatedPointsPosition?: AggregatedPointsPosition, aggregationGroupWidth?: number | undefined, aggregationInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, allowDecimals?: boolean | undefined, argumentType?: ChartsDataType | undefined, axisDivisionFactor?: number, breaks?: Array<ScaleBreak> | undefined | { endValue?: Date | number | string | undefined, startValue?: Date | number | string | undefined }[], breakStyle?: { color?: string, line?: ScaleBreakLineStyle, width?: number }, categories?: Array<Date | number | string>, color?: string, constantLines?: { color?: string, dashStyle?: DashStyle, displayBehindSeries?: boolean, extendAxis?: boolean, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, position?: RelativePosition, text?: string | undefined, verticalAlignment?: VerticalAlignment, visible?: boolean }, paddingLeftRight?: number, paddingTopBottom?: number, value?: Date | number | string | undefined, width?: number }[], constantLineStyle?: { color?: string, dashStyle?: DashStyle, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, position?: RelativePosition, verticalAlignment?: VerticalAlignment, visible?: boolean }, paddingLeftRight?: number, paddingTopBottom?: number, width?: number }, customPosition?: Date | number | string | undefined, customPositionAxis?: string | undefined, discreteAxisDivisionMode?: DiscreteAxisDivisionMode, endOnTick?: boolean, grid?: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }, holidays?: Array<Date | string> | Array<number> | undefined, hoverMode?: ArgumentAxisHoverMode, inverted?: boolean, label?: { alignment?: HorizontalAlignment | undefined, customizeHint?: ((argument: { value: Date | number | string, valueText: string }) => string), customizeText?: ((argument: { value: Date | number | string, valueText: string }) => string), displayMode?: ChartLabelDisplayMode, font?: Font, format?: Format | undefined, indentFromAxis?: number, overlappingBehavior?: ChartsAxisLabelOverlap, position?: Position | RelativePosition, rotationAngle?: number, staggeringSpacing?: number, template?: any, textOverflow?: TextOverflow, visible?: boolean, wordWrap?: WordWrap }, linearThreshold?: number | undefined, logarithmBase?: number, maxValueMargin?: number | undefined, minorGrid?: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }, minorTick?: { color?: string, length?: number, opacity?: number, shift?: number, visible?: boolean, width?: number }, minorTickCount?: number | undefined, minorTickInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, minValueMargin?: number | undefined, minVisualRangeLength?: number | TimeInterval | undefined | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, offset?: number | undefined, opacity?: number | undefined, placeholderSize?: null | number, position?: Position, singleWorkdays?: Array<Date | string> | Array<number> | undefined, strips?: { color?: string | undefined, endValue?: Date | number | string | undefined, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, text?: string | undefined, verticalAlignment?: VerticalAlignment }, paddingLeftRight?: number, paddingTopBottom?: number, startValue?: Date | number | string | undefined }[], stripStyle?: { label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, verticalAlignment?: VerticalAlignment }, paddingLeftRight?: number, paddingTopBottom?: number }, tick?: { color?: string, length?: number, opacity?: number | undefined, shift?: number, visible?: boolean, width?: number }, tickInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, title?: string | { alignment?: HorizontalAlignment, font?: Font, margin?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, type?: AxisScaleType | undefined, valueMarginsEnabled?: boolean, visible?: boolean, visualRange?: Array<Date | number | string> | CommonChartTypes.VisualRange, visualRangeUpdateMode?: VisualRangeUpdateMode, wholeRange?: Array<Date | number | string> | undefined | CommonChartTypes.VisualRange, width?: number, workdaysOnly?: boolean, workWeek?: Array<number> }>;
 
     /**
     
@@ -1187,7 +1187,7 @@ export class DxChartComponent extends DxComponent implements OnDestroy, OnChange
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() commonAxisSettingsChange: EventEmitter<{ aggregatedPointsPosition?: AggregatedPointsPosition, allowDecimals?: boolean | undefined, breakStyle?: { color?: string, line?: ScaleBreakLineStyle, width?: number }, color?: string, constantLineStyle?: { color?: string, dashStyle?: DashStyle, label?: { font?: Font, position?: RelativePosition, visible?: boolean }, paddingLeftRight?: number, paddingTopBottom?: number, width?: number }, discreteAxisDivisionMode?: DiscreteAxisDivisionMode, endOnTick?: boolean | undefined, grid?: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }, inverted?: boolean, label?: { alignment?: HorizontalAlignment | undefined, displayMode?: ChartLabelDisplayMode, font?: Font, indentFromAxis?: number, overlappingBehavior?: ChartsAxisLabelOverlap, position?: Position | RelativePosition, rotationAngle?: number, staggeringSpacing?: number, template?: any, textOverflow?: TextOverflow, visible?: boolean, wordWrap?: WordWrap }, maxValueMargin?: number | undefined, minorGrid?: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }, minorTick?: { color?: string, length?: number, opacity?: number, shift?: number, visible?: boolean, width?: number }, minValueMargin?: number | undefined, opacity?: number | undefined, placeholderSize?: number, stripStyle?: { label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, verticalAlignment?: VerticalAlignment }, paddingLeftRight?: number, paddingTopBottom?: number }, tick?: { color?: string, length?: number, opacity?: number | undefined, shift?: number, visible?: boolean, width?: number }, title?: { alignment?: HorizontalAlignment, font?: Font, margin?: number, textOverflow?: TextOverflow, wordWrap?: WordWrap }, valueMarginsEnabled?: boolean, visible?: boolean, width?: number }>;
+    @Output() commonAxisSettingsChange: EventEmitter<{ aggregatedPointsPosition?: AggregatedPointsPosition, allowDecimals?: boolean | undefined, breakStyle?: { color?: string, line?: ScaleBreakLineStyle, width?: number }, color?: string, constantLineStyle?: { color?: string, dashStyle?: DashStyle, label?: { font?: Font, position?: RelativePosition, visible?: boolean }, paddingLeftRight?: number, paddingTopBottom?: number, width?: number }, discreteAxisDivisionMode?: DiscreteAxisDivisionMode, endOnTick?: boolean | undefined, grid?: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }, inverted?: boolean, label?: { alignment?: HorizontalAlignment | undefined, displayMode?: ChartLabelDisplayMode, font?: Font, indentFromAxis?: number, overlappingBehavior?: ChartsAxisLabelOverlap, position?: Position | RelativePosition, rotationAngle?: number, staggeringSpacing?: number, template?: any, textOverflow?: TextOverflow, visible?: boolean, wordWrap?: WordWrap }, maxValueMargin?: number | undefined, minorGrid?: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }, minorTick?: { color?: string, length?: number, opacity?: number, shift?: number, visible?: boolean, width?: number }, minValueMargin?: number | undefined, opacity?: number | undefined, placeholderSize?: null | number, stripStyle?: { label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, verticalAlignment?: VerticalAlignment }, paddingLeftRight?: number, paddingTopBottom?: number }, tick?: { color?: string, length?: number, opacity?: number | undefined, shift?: number, visible?: boolean, width?: number }, title?: { alignment?: HorizontalAlignment, font?: Font, margin?: number, textOverflow?: TextOverflow, wordWrap?: WordWrap }, valueMarginsEnabled?: boolean, visible?: boolean, width?: number }>;
 
     /**
     
@@ -1285,7 +1285,7 @@ export class DxChartComponent extends DxComponent implements OnDestroy, OnChange
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() legendChange: EventEmitter<{ backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((seriesInfo: { seriesColor: string, seriesIndex: number, seriesName: any }) => string), customizeItems?: ((items: Array<LegendItem>) => Array<LegendItem>), customizeText?: ((seriesInfo: { seriesColor: string, seriesIndex: number, seriesName: any }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, hoverMode?: LegendHoverMode, itemsAlignment?: HorizontalAlignment | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, position?: RelativePosition, rowCount?: number, rowItemSpacing?: number, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean }>;
+    @Output() legendChange: EventEmitter<{ backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((seriesInfo: { seriesColor: string, seriesIndex: number, seriesName: any }) => string), customizeItems?: ((items: Array<LegendItem>) => Array<LegendItem>), customizeText?: ((seriesInfo: { seriesColor: string, seriesIndex: number, seriesName: any }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, hoverMode?: LegendHoverMode, itemsAlignment?: HorizontalAlignment | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, position?: RelativePosition, rowCount?: number, rowItemSpacing?: number, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined }, text?: string | undefined, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean }>;
 
     /**
     
@@ -1453,7 +1453,7 @@ export class DxChartComponent extends DxComponent implements OnDestroy, OnChange
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() titleChange: EventEmitter<string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }>;
+    @Output() titleChange: EventEmitter<string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string | undefined, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }>;
 
     /**
     
@@ -1467,7 +1467,7 @@ export class DxChartComponent extends DxComponent implements OnDestroy, OnChange
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() valueAxisChange: EventEmitter<{ aggregatedPointsPosition?: AggregatedPointsPosition, allowDecimals?: boolean | undefined, autoBreaksEnabled?: boolean, axisDivisionFactor?: number, breaks?: Array<ScaleBreak> | { endValue?: Date | number | string | undefined, startValue?: Date | number | string | undefined }[], breakStyle?: { color?: string, line?: ScaleBreakLineStyle, width?: number }, categories?: Array<Date | number | string>, color?: string, constantLines?: { color?: string, dashStyle?: DashStyle, displayBehindSeries?: boolean, extendAxis?: boolean, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, position?: RelativePosition, text?: string | undefined, verticalAlignment?: VerticalAlignment, visible?: boolean }, paddingLeftRight?: number, paddingTopBottom?: number, value?: Date | number | string | undefined, width?: number }[], constantLineStyle?: { color?: string, dashStyle?: DashStyle, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, position?: RelativePosition, verticalAlignment?: VerticalAlignment, visible?: boolean }, paddingLeftRight?: number, paddingTopBottom?: number, width?: number }, customPosition?: Date | number | string | undefined, discreteAxisDivisionMode?: DiscreteAxisDivisionMode, endOnTick?: boolean | undefined, grid?: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }, inverted?: boolean, label?: { alignment?: HorizontalAlignment | undefined, customizeHint?: ((axisValue: { value: Date | number | string, valueText: string }) => string), customizeText?: ((axisValue: { value: Date | number | string, valueText: string }) => string), displayMode?: ChartLabelDisplayMode, font?: Font, format?: Format | undefined, indentFromAxis?: number, overlappingBehavior?: ChartsAxisLabelOverlap, position?: Position | RelativePosition, rotationAngle?: number, staggeringSpacing?: number, template?: any, textOverflow?: TextOverflow, visible?: boolean, wordWrap?: WordWrap }, linearThreshold?: number | undefined, logarithmBase?: number, maxAutoBreakCount?: number, maxValueMargin?: number | undefined, minorGrid?: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }, minorTick?: { color?: string, length?: number, opacity?: number, shift?: number, visible?: boolean, width?: number }, minorTickCount?: number | undefined, minorTickInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, minValueMargin?: number | undefined, minVisualRangeLength?: number | TimeInterval | undefined | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, multipleAxesSpacing?: number, name?: string | undefined, offset?: number | undefined, opacity?: number | undefined, pane?: string | undefined, placeholderSize?: number, position?: Position, showZero?: boolean | undefined, strips?: { color?: string | undefined, endValue?: Date | number | string | undefined, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, text?: string | undefined, verticalAlignment?: VerticalAlignment }, paddingLeftRight?: number, paddingTopBottom?: number, startValue?: Date | number | string | undefined }[], stripStyle?: { label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, verticalAlignment?: VerticalAlignment }, paddingLeftRight?: number, paddingTopBottom?: number }, synchronizedValue?: number | undefined, tick?: { color?: string, length?: number, opacity?: number | undefined, shift?: number, visible?: boolean, width?: number }, tickInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, title?: string | { alignment?: HorizontalAlignment, font?: Font, margin?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, type?: AxisScaleType | undefined, valueMarginsEnabled?: boolean, valueType?: ChartsDataType | undefined, visible?: boolean, visualRange?: Array<Date | number | string> | CommonChartTypes.VisualRange, visualRangeUpdateMode?: ValueAxisVisualRangeUpdateMode, wholeRange?: Array<Date | number | string> | undefined | CommonChartTypes.VisualRange, width?: number }[]>;
+    @Output() valueAxisChange: EventEmitter<{ aggregatedPointsPosition?: AggregatedPointsPosition, allowDecimals?: boolean | undefined, autoBreaksEnabled?: boolean, axisDivisionFactor?: number, breaks?: Array<ScaleBreak> | undefined | { endValue?: Date | number | string | undefined, startValue?: Date | number | string | undefined }[], breakStyle?: { color?: string, line?: ScaleBreakLineStyle, width?: number }, categories?: Array<Date | number | string>, color?: string, constantLines?: { color?: string, dashStyle?: DashStyle, displayBehindSeries?: boolean, extendAxis?: boolean, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, position?: RelativePosition, text?: string | undefined, verticalAlignment?: VerticalAlignment, visible?: boolean }, paddingLeftRight?: number, paddingTopBottom?: number, value?: Date | number | string | undefined, width?: number }[], constantLineStyle?: { color?: string, dashStyle?: DashStyle, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, position?: RelativePosition, verticalAlignment?: VerticalAlignment, visible?: boolean }, paddingLeftRight?: number, paddingTopBottom?: number, width?: number }, customPosition?: Date | number | string | undefined, discreteAxisDivisionMode?: DiscreteAxisDivisionMode, endOnTick?: boolean | undefined, grid?: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }, inverted?: boolean, label?: { alignment?: HorizontalAlignment | undefined, customizeHint?: ((axisValue: { value: Date | number | string, valueText: string }) => string), customizeText?: ((axisValue: { value: Date | number | string, valueText: string }) => string), displayMode?: ChartLabelDisplayMode, font?: Font, format?: Format | undefined, indentFromAxis?: number, overlappingBehavior?: ChartsAxisLabelOverlap, position?: Position | RelativePosition, rotationAngle?: number, staggeringSpacing?: number, template?: any, textOverflow?: TextOverflow, visible?: boolean, wordWrap?: WordWrap }, linearThreshold?: number | undefined, logarithmBase?: number, maxAutoBreakCount?: number, maxValueMargin?: number | undefined, minorGrid?: { color?: string, opacity?: number | undefined, visible?: boolean, width?: number }, minorTick?: { color?: string, length?: number, opacity?: number, shift?: number, visible?: boolean, width?: number }, minorTickCount?: number | undefined, minorTickInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, minValueMargin?: number | undefined, minVisualRangeLength?: number | TimeInterval | undefined | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, multipleAxesSpacing?: number, name?: string | undefined, offset?: number | undefined, opacity?: number | undefined, pane?: string | undefined, placeholderSize?: null | number, position?: Position, showZero?: boolean | undefined, strips?: { color?: string | undefined, endValue?: Date | number | string | undefined, label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, text?: string | undefined, verticalAlignment?: VerticalAlignment }, paddingLeftRight?: number, paddingTopBottom?: number, startValue?: Date | number | string | undefined }[], stripStyle?: { label?: { font?: Font, horizontalAlignment?: HorizontalAlignment, verticalAlignment?: VerticalAlignment }, paddingLeftRight?: number, paddingTopBottom?: number }, synchronizedValue?: number | undefined, tick?: { color?: string, length?: number, opacity?: number | undefined, shift?: number, visible?: boolean, width?: number }, tickInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, title?: string | { alignment?: HorizontalAlignment, font?: Font, margin?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, type?: AxisScaleType | undefined, valueMarginsEnabled?: boolean, valueType?: ChartsDataType | undefined, visible?: boolean, visualRange?: Array<Date | number | string> | CommonChartTypes.VisualRange, visualRangeUpdateMode?: ValueAxisVisualRangeUpdateMode, wholeRange?: Array<Date | number | string> | undefined | CommonChartTypes.VisualRange, width?: number }[]>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/chart/nested/argument-axis.ts b/packages/devextreme-angular/src/ui/chart/nested/argument-axis.ts
index e0c4c807970a..c2c34db8b507 100644
--- a/packages/devextreme-angular/src/ui/chart/nested/argument-axis.ts
+++ b/packages/devextreme-angular/src/ui/chart/nested/argument-axis.ts
@@ -109,10 +109,10 @@ export class DxoChartArgumentAxisComponent extends NestedOption implements OnDes
     }
 
     @Input()
-    get breaks(): Array<ScaleBreak> | { endValue?: Date | number | string | undefined, startValue?: Date | number | string | undefined }[] {
+    get breaks(): Array<ScaleBreak> | undefined | { endValue?: Date | number | string | undefined, startValue?: Date | number | string | undefined }[] {
         return this._getOption('breaks');
     }
-    set breaks(value: Array<ScaleBreak> | { endValue?: Date | number | string | undefined, startValue?: Date | number | string | undefined }[]) {
+    set breaks(value: Array<ScaleBreak> | undefined | { endValue?: Date | number | string | undefined, startValue?: Date | number | string | undefined }[]) {
         this._setOption('breaks', value);
     }
 
@@ -197,10 +197,10 @@ export class DxoChartArgumentAxisComponent extends NestedOption implements OnDes
     }
 
     @Input()
-    get holidays(): Array<Date | string> | Array<number> {
+    get holidays(): Array<Date | string> | Array<number> | undefined {
         return this._getOption('holidays');
     }
-    set holidays(value: Array<Date | string> | Array<number>) {
+    set holidays(value: Array<Date | string> | Array<number> | undefined) {
         this._setOption('holidays', value);
     }
 
@@ -317,10 +317,10 @@ export class DxoChartArgumentAxisComponent extends NestedOption implements OnDes
     }
 
     @Input()
-    get placeholderSize(): number {
+    get placeholderSize(): null | number {
         return this._getOption('placeholderSize');
     }
-    set placeholderSize(value: number) {
+    set placeholderSize(value: null | number) {
         this._setOption('placeholderSize', value);
     }
 
@@ -333,10 +333,10 @@ export class DxoChartArgumentAxisComponent extends NestedOption implements OnDes
     }
 
     @Input()
-    get singleWorkdays(): Array<Date | string> | Array<number> {
+    get singleWorkdays(): Array<Date | string> | Array<number> | undefined {
         return this._getOption('singleWorkdays');
     }
-    set singleWorkdays(value: Array<Date | string> | Array<number>) {
+    set singleWorkdays(value: Array<Date | string> | Array<number> | undefined) {
         this._setOption('singleWorkdays', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/chart/nested/chart-title-subtitle.ts b/packages/devextreme-angular/src/ui/chart/nested/chart-title-subtitle.ts
index ec496a613cce..3a9eea417016 100644
--- a/packages/devextreme-angular/src/ui/chart/nested/chart-title-subtitle.ts
+++ b/packages/devextreme-angular/src/ui/chart/nested/chart-title-subtitle.ts
@@ -48,10 +48,10 @@ export class DxoChartChartTitleSubtitleComponent extends NestedOption implements
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/chart/nested/chart-title.ts b/packages/devextreme-angular/src/ui/chart/nested/chart-title.ts
index 668b6b01943e..365722ad50bf 100644
--- a/packages/devextreme-angular/src/ui/chart/nested/chart-title.ts
+++ b/packages/devextreme-angular/src/ui/chart/nested/chart-title.ts
@@ -65,18 +65,18 @@ export class DxoChartChartTitleComponent extends NestedOption implements OnDestr
     }
 
     @Input()
-    get subtitle(): string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap } {
+    get subtitle(): string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap } {
         return this._getOption('subtitle');
     }
-    set subtitle(value: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }) {
+    set subtitle(value: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }) {
         this._setOption('subtitle', value);
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/chart/nested/common-axis-settings.ts b/packages/devextreme-angular/src/ui/chart/nested/common-axis-settings.ts
index d6dbd4e16407..02d05dc0017c 100644
--- a/packages/devextreme-angular/src/ui/chart/nested/common-axis-settings.ts
+++ b/packages/devextreme-angular/src/ui/chart/nested/common-axis-settings.ts
@@ -154,10 +154,10 @@ export class DxoChartCommonAxisSettingsComponent extends NestedOption implements
     }
 
     @Input()
-    get placeholderSize(): number {
+    get placeholderSize(): null | number {
         return this._getOption('placeholderSize');
     }
-    set placeholderSize(value: number) {
+    set placeholderSize(value: null | number) {
         this._setOption('placeholderSize', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/chart/nested/legend-title-subtitle.ts b/packages/devextreme-angular/src/ui/chart/nested/legend-title-subtitle.ts
index dd914b855048..2a9f5c62dcf3 100644
--- a/packages/devextreme-angular/src/ui/chart/nested/legend-title-subtitle.ts
+++ b/packages/devextreme-angular/src/ui/chart/nested/legend-title-subtitle.ts
@@ -48,10 +48,10 @@ export class DxoChartLegendTitleSubtitleComponent extends NestedOption implement
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/chart/nested/legend-title.ts b/packages/devextreme-angular/src/ui/chart/nested/legend-title.ts
index 4dc8044f3941..4904afd78c0f 100644
--- a/packages/devextreme-angular/src/ui/chart/nested/legend-title.ts
+++ b/packages/devextreme-angular/src/ui/chart/nested/legend-title.ts
@@ -65,18 +65,18 @@ export class DxoChartLegendTitleComponent extends NestedOption implements OnDest
     }
 
     @Input()
-    get subtitle(): string | { font?: Font, offset?: number, text?: string } {
+    get subtitle(): string | { font?: Font, offset?: number, text?: string | undefined } {
         return this._getOption('subtitle');
     }
-    set subtitle(value: string | { font?: Font, offset?: number, text?: string }) {
+    set subtitle(value: string | { font?: Font, offset?: number, text?: string | undefined }) {
         this._setOption('subtitle', value);
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/chart/nested/legend.ts b/packages/devextreme-angular/src/ui/chart/nested/legend.ts
index ee5a00e57fea..038351838d84 100644
--- a/packages/devextreme-angular/src/ui/chart/nested/legend.ts
+++ b/packages/devextreme-angular/src/ui/chart/nested/legend.ts
@@ -201,10 +201,10 @@ export class DxoChartLegendComponent extends NestedOption implements OnDestroy,
     }
 
     @Input()
-    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge } {
+    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined }, text?: string | undefined, verticalAlignment?: VerticalEdge } {
         return this._getOption('title');
     }
-    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge }) {
+    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined }, text?: string | undefined, verticalAlignment?: VerticalEdge }) {
         this._setOption('title', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/chart/nested/subtitle.ts b/packages/devextreme-angular/src/ui/chart/nested/subtitle.ts
index de666cab9d4d..45d34a2bee58 100644
--- a/packages/devextreme-angular/src/ui/chart/nested/subtitle.ts
+++ b/packages/devextreme-angular/src/ui/chart/nested/subtitle.ts
@@ -48,10 +48,10 @@ export class DxoChartSubtitleComponent extends NestedOption implements OnDestroy
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/chart/nested/title.ts b/packages/devextreme-angular/src/ui/chart/nested/title.ts
index 3dceb8b4df12..86fd0bd6398b 100644
--- a/packages/devextreme-angular/src/ui/chart/nested/title.ts
+++ b/packages/devextreme-angular/src/ui/chart/nested/title.ts
@@ -97,10 +97,10 @@ export class DxoChartTitleComponent extends NestedOption implements OnDestroy, O
     }
 
     @Input()
-    get subtitle(): string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap } {
+    get subtitle(): string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap } {
         return this._getOption('subtitle');
     }
-    set subtitle(value: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }) {
+    set subtitle(value: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }) {
         this._setOption('subtitle', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/chart/nested/value-axis-dxi.ts b/packages/devextreme-angular/src/ui/chart/nested/value-axis-dxi.ts
index 72a07d7de61f..e5f598e50a51 100644
--- a/packages/devextreme-angular/src/ui/chart/nested/value-axis-dxi.ts
+++ b/packages/devextreme-angular/src/ui/chart/nested/value-axis-dxi.ts
@@ -97,10 +97,10 @@ export class DxiChartValueAxisComponent extends CollectionNestedOption {
     }
 
     @Input()
-    get breaks(): Array<ScaleBreak> | { endValue?: Date | number | string | undefined, startValue?: Date | number | string | undefined }[] {
+    get breaks(): Array<ScaleBreak> | undefined | { endValue?: Date | number | string | undefined, startValue?: Date | number | string | undefined }[] {
         return this._getOption('breaks');
     }
-    set breaks(value: Array<ScaleBreak> | { endValue?: Date | number | string | undefined, startValue?: Date | number | string | undefined }[]) {
+    set breaks(value: Array<ScaleBreak> | undefined | { endValue?: Date | number | string | undefined, startValue?: Date | number | string | undefined }[]) {
         this._setOption('breaks', value);
     }
 
@@ -313,10 +313,10 @@ export class DxiChartValueAxisComponent extends CollectionNestedOption {
     }
 
     @Input()
-    get placeholderSize(): number {
+    get placeholderSize(): null | number {
         return this._getOption('placeholderSize');
     }
-    set placeholderSize(value: number) {
+    set placeholderSize(value: null | number) {
         this._setOption('placeholderSize', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/chat/nested/file-uploader-options.ts b/packages/devextreme-angular/src/ui/chat/nested/file-uploader-options.ts
index b71b10a2bcff..0cd0ea4af1ee 100644
--- a/packages/devextreme-angular/src/ui/chat/nested/file-uploader-options.ts
+++ b/packages/devextreme-angular/src/ui/chat/nested/file-uploader-options.ts
@@ -244,10 +244,10 @@ export class DxoChatFileUploaderOptionsComponent extends NestedOption implements
     }
 
     @Input()
-    get onBeforeSend(): ((e: BeforeSendEvent) => void) {
+    get onBeforeSend(): ((e: BeforeSendEvent) => void) | undefined {
         return this._getOption('onBeforeSend');
     }
-    set onBeforeSend(value: ((e: BeforeSendEvent) => void)) {
+    set onBeforeSend(value: ((e: BeforeSendEvent) => void) | undefined) {
         this._setOption('onBeforeSend', value);
     }
 
@@ -268,26 +268,26 @@ export class DxoChatFileUploaderOptionsComponent extends NestedOption implements
     }
 
     @Input()
-    get onDropZoneEnter(): ((e: DropZoneEnterEvent) => void) {
+    get onDropZoneEnter(): ((e: DropZoneEnterEvent) => void) | undefined {
         return this._getOption('onDropZoneEnter');
     }
-    set onDropZoneEnter(value: ((e: DropZoneEnterEvent) => void)) {
+    set onDropZoneEnter(value: ((e: DropZoneEnterEvent) => void) | undefined) {
         this._setOption('onDropZoneEnter', value);
     }
 
     @Input()
-    get onDropZoneLeave(): ((e: DropZoneLeaveEvent) => void) {
+    get onDropZoneLeave(): ((e: DropZoneLeaveEvent) => void) | undefined {
         return this._getOption('onDropZoneLeave');
     }
-    set onDropZoneLeave(value: ((e: DropZoneLeaveEvent) => void)) {
+    set onDropZoneLeave(value: ((e: DropZoneLeaveEvent) => void) | undefined) {
         this._setOption('onDropZoneLeave', value);
     }
 
     @Input()
-    get onFilesUploaded(): ((e: FilesUploadedEvent) => void) {
+    get onFilesUploaded(): ((e: FilesUploadedEvent) => void) | undefined {
         return this._getOption('onFilesUploaded');
     }
-    set onFilesUploaded(value: ((e: FilesUploadedEvent) => void)) {
+    set onFilesUploaded(value: ((e: FilesUploadedEvent) => void) | undefined) {
         this._setOption('onFilesUploaded', value);
     }
 
@@ -308,50 +308,50 @@ export class DxoChatFileUploaderOptionsComponent extends NestedOption implements
     }
 
     @Input()
-    get onProgress(): ((e: ProgressEvent) => void) {
+    get onProgress(): ((e: ProgressEvent) => void) | undefined {
         return this._getOption('onProgress');
     }
-    set onProgress(value: ((e: ProgressEvent) => void)) {
+    set onProgress(value: ((e: ProgressEvent) => void) | undefined) {
         this._setOption('onProgress', value);
     }
 
     @Input()
-    get onUploadAborted(): ((e: UploadAbortedEvent) => void) {
+    get onUploadAborted(): ((e: UploadAbortedEvent) => void) | undefined {
         return this._getOption('onUploadAborted');
     }
-    set onUploadAborted(value: ((e: UploadAbortedEvent) => void)) {
+    set onUploadAborted(value: ((e: UploadAbortedEvent) => void) | undefined) {
         this._setOption('onUploadAborted', value);
     }
 
     @Input()
-    get onUploaded(): ((e: UploadedEvent) => void) {
+    get onUploaded(): ((e: UploadedEvent) => void) | undefined {
         return this._getOption('onUploaded');
     }
-    set onUploaded(value: ((e: UploadedEvent) => void)) {
+    set onUploaded(value: ((e: UploadedEvent) => void) | undefined) {
         this._setOption('onUploaded', value);
     }
 
     @Input()
-    get onUploadError(): ((e: UploadErrorEvent) => void) {
+    get onUploadError(): ((e: UploadErrorEvent) => void) | undefined {
         return this._getOption('onUploadError');
     }
-    set onUploadError(value: ((e: UploadErrorEvent) => void)) {
+    set onUploadError(value: ((e: UploadErrorEvent) => void) | undefined) {
         this._setOption('onUploadError', value);
     }
 
     @Input()
-    get onUploadStarted(): ((e: UploadStartedEvent) => void) {
+    get onUploadStarted(): ((e: UploadStartedEvent) => void) | undefined {
         return this._getOption('onUploadStarted');
     }
-    set onUploadStarted(value: ((e: UploadStartedEvent) => void)) {
+    set onUploadStarted(value: ((e: UploadStartedEvent) => void) | undefined) {
         this._setOption('onUploadStarted', value);
     }
 
     @Input()
-    get onValueChanged(): ((e: ValueChangedEvent) => void) {
+    get onValueChanged(): ((e: ValueChangedEvent) => void) | undefined {
         return this._getOption('onValueChanged');
     }
-    set onValueChanged(value: ((e: ValueChangedEvent) => void)) {
+    set onValueChanged(value: ((e: ValueChangedEvent) => void) | undefined) {
         this._setOption('onValueChanged', value);
     }
 
@@ -500,18 +500,18 @@ export class DxoChatFileUploaderOptionsComponent extends NestedOption implements
     }
 
     @Input()
-    get validationError(): any {
+    get validationError(): any | null {
         return this._getOption('validationError');
     }
-    set validationError(value: any) {
+    set validationError(value: any | null) {
         this._setOption('validationError', value);
     }
 
     @Input()
-    get validationErrors(): Array<any> {
+    get validationErrors(): Array<any> | null {
         return this._getOption('validationErrors');
     }
-    set validationErrors(value: Array<any>) {
+    set validationErrors(value: Array<any> | null) {
         this._setOption('validationErrors', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/chat/nested/suggestions.ts b/packages/devextreme-angular/src/ui/chat/nested/suggestions.ts
index 9f72a9b4ed56..acd4ac4fd0b1 100644
--- a/packages/devextreme-angular/src/ui/chat/nested/suggestions.ts
+++ b/packages/devextreme-angular/src/ui/chat/nested/suggestions.ts
@@ -158,10 +158,10 @@ export class DxoChatSuggestionsComponent extends NestedOption implements OnDestr
     }
 
     @Input()
-    get onItemClick(): ((e: ItemClickEvent) => void) {
+    get onItemClick(): ((e: ItemClickEvent) => void) | undefined {
         return this._getOption('onItemClick');
     }
-    set onItemClick(value: ((e: ItemClickEvent) => void)) {
+    set onItemClick(value: ((e: ItemClickEvent) => void) | undefined) {
         this._setOption('onItemClick', value);
     }
 
@@ -174,10 +174,10 @@ export class DxoChatSuggestionsComponent extends NestedOption implements OnDestr
     }
 
     @Input()
-    get onSelectionChanged(): ((e: SelectionChangedEvent) => void) {
+    get onSelectionChanged(): ((e: SelectionChangedEvent) => void) | undefined {
         return this._getOption('onSelectionChanged');
     }
-    set onSelectionChanged(value: ((e: SelectionChangedEvent) => void)) {
+    set onSelectionChanged(value: ((e: SelectionChangedEvent) => void) | undefined) {
         this._setOption('onSelectionChanged', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/check-box/index.ts b/packages/devextreme-angular/src/ui/check-box/index.ts
index 1cce6c322c1f..10563609d400 100644
--- a/packages/devextreme-angular/src/ui/check-box/index.ts
+++ b/packages/devextreme-angular/src/ui/check-box/index.ts
@@ -298,10 +298,10 @@ export class DxCheckBoxComponent extends DxComponent implements OnDestroy, Contr
     
      */
     @Input()
-    get validationError(): any {
+    get validationError(): any | null {
         return this._getOption('validationError');
     }
-    set validationError(value: any) {
+    set validationError(value: any | null) {
         this._setOption('validationError', value);
     }
 
@@ -311,10 +311,10 @@ export class DxCheckBoxComponent extends DxComponent implements OnDestroy, Contr
     
      */
     @Input()
-    get validationErrors(): Array<any> {
+    get validationErrors(): Array<any> | null {
         return this._getOption('validationErrors');
     }
-    set validationErrors(value: Array<any>) {
+    set validationErrors(value: Array<any> | null) {
         this._setOption('validationErrors', value);
     }
 
@@ -363,10 +363,10 @@ export class DxCheckBoxComponent extends DxComponent implements OnDestroy, Contr
     
      */
     @Input()
-    get value(): boolean | null | undefined {
+    get value(): boolean | null {
         return this._getOption('value');
     }
-    set value(value: boolean | null | undefined) {
+    set value(value: boolean | null) {
         this._setOption('value', value);
     }
 
@@ -560,14 +560,14 @@ export class DxCheckBoxComponent extends DxComponent implements OnDestroy, Contr
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorChange: EventEmitter<any>;
+    @Output() validationErrorChange: EventEmitter<any | null>;
 
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorsChange: EventEmitter<Array<any>>;
+    @Output() validationErrorsChange: EventEmitter<Array<any> | null>;
 
     /**
     
@@ -595,7 +595,7 @@ export class DxCheckBoxComponent 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<boolean | null | undefined>;
+    @Output() valueChange: EventEmitter<boolean | null>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/circular-gauge/index.ts b/packages/devextreme-angular/src/ui/circular-gauge/index.ts
index f439065baa64..0ad6beba06c3 100644
--- a/packages/devextreme-angular/src/ui/circular-gauge/index.ts
+++ b/packages/devextreme-angular/src/ui/circular-gauge/index.ts
@@ -296,10 +296,10 @@ export class DxCircularGaugeComponent extends DxComponent implements OnDestroy,
     
      */
     @Input()
-    get scale(): { allowDecimals?: boolean | undefined, customMinorTicks?: Array<number>, customTicks?: Array<number>, endValue?: number, label?: { customizeText?: ((scaleValue: { value: number, valueText: string }) => string), font?: Font, format?: Format | undefined, hideFirstOrLast?: CircularGaugeLabelOverlap, indentFromTick?: number, overlappingBehavior?: LabelOverlap, useRangeColors?: boolean, visible?: boolean }, minorTick?: { color?: string, length?: number, opacity?: number, visible?: boolean, width?: number }, minorTickInterval?: number | undefined, orientation?: CircularGaugeElementOrientation, scaleDivisionFactor?: number, startValue?: number, tick?: { color?: string, length?: number, opacity?: number, visible?: boolean, width?: number }, tickInterval?: number | undefined } {
+    get scale(): { allowDecimals?: boolean | undefined, customMinorTicks?: Array<number> | undefined, customTicks?: Array<number> | undefined, endValue?: number, label?: { customizeText?: ((scaleValue: { value: number, valueText: string }) => string), font?: Font, format?: Format | undefined, hideFirstOrLast?: CircularGaugeLabelOverlap, indentFromTick?: number, overlappingBehavior?: LabelOverlap, useRangeColors?: boolean, visible?: boolean }, minorTick?: { color?: string, length?: number, opacity?: number, visible?: boolean, width?: number }, minorTickInterval?: number | undefined, orientation?: CircularGaugeElementOrientation, scaleDivisionFactor?: number, startValue?: number, tick?: { color?: string, length?: number, opacity?: number, visible?: boolean, width?: number }, tickInterval?: number | undefined } {
         return this._getOption('scale');
     }
-    set scale(value: { allowDecimals?: boolean | undefined, customMinorTicks?: Array<number>, customTicks?: Array<number>, endValue?: number, label?: { customizeText?: ((scaleValue: { value: number, valueText: string }) => string), font?: Font, format?: Format | undefined, hideFirstOrLast?: CircularGaugeLabelOverlap, indentFromTick?: number, overlappingBehavior?: LabelOverlap, useRangeColors?: boolean, visible?: boolean }, minorTick?: { color?: string, length?: number, opacity?: number, visible?: boolean, width?: number }, minorTickInterval?: number | undefined, orientation?: CircularGaugeElementOrientation, scaleDivisionFactor?: number, startValue?: number, tick?: { color?: string, length?: number, opacity?: number, visible?: boolean, width?: number }, tickInterval?: number | undefined }) {
+    set scale(value: { allowDecimals?: boolean | undefined, customMinorTicks?: Array<number> | undefined, customTicks?: Array<number> | undefined, endValue?: number, label?: { customizeText?: ((scaleValue: { value: number, valueText: string }) => string), font?: Font, format?: Format | undefined, hideFirstOrLast?: CircularGaugeLabelOverlap, indentFromTick?: number, overlappingBehavior?: LabelOverlap, useRangeColors?: boolean, visible?: boolean }, minorTick?: { color?: string, length?: number, opacity?: number, visible?: boolean, width?: number }, minorTickInterval?: number | undefined, orientation?: CircularGaugeElementOrientation, scaleDivisionFactor?: number, startValue?: number, tick?: { color?: string, length?: number, opacity?: number, visible?: boolean, width?: number }, tickInterval?: number | undefined }) {
         this._setOption('scale', value);
     }
 
@@ -335,10 +335,10 @@ export class DxCircularGaugeComponent extends DxComponent implements OnDestroy,
     
      */
     @Input()
-    get subvalues(): Array<number> {
+    get subvalues(): Array<number> | undefined {
         return this._getOption('subvalues');
     }
-    set subvalues(value: Array<number>) {
+    set subvalues(value: Array<number> | undefined) {
         this._setOption('subvalues', value);
     }
 
@@ -361,10 +361,10 @@ export class DxCircularGaugeComponent extends DxComponent implements OnDestroy,
     
      */
     @Input()
-    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap } {
+    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string | undefined, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap } {
         return this._getOption('title');
     }
-    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }) {
+    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string | undefined, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }) {
         this._setOption('title', value);
     }
 
@@ -583,7 +583,7 @@ export class DxCircularGaugeComponent extends DxComponent implements OnDestroy,
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() scaleChange: EventEmitter<{ allowDecimals?: boolean | undefined, customMinorTicks?: Array<number>, customTicks?: Array<number>, endValue?: number, label?: { customizeText?: ((scaleValue: { value: number, valueText: string }) => string), font?: Font, format?: Format | undefined, hideFirstOrLast?: CircularGaugeLabelOverlap, indentFromTick?: number, overlappingBehavior?: LabelOverlap, useRangeColors?: boolean, visible?: boolean }, minorTick?: { color?: string, length?: number, opacity?: number, visible?: boolean, width?: number }, minorTickInterval?: number | undefined, orientation?: CircularGaugeElementOrientation, scaleDivisionFactor?: number, startValue?: number, tick?: { color?: string, length?: number, opacity?: number, visible?: boolean, width?: number }, tickInterval?: number | undefined }>;
+    @Output() scaleChange: EventEmitter<{ allowDecimals?: boolean | undefined, customMinorTicks?: Array<number> | undefined, customTicks?: Array<number> | undefined, endValue?: number, label?: { customizeText?: ((scaleValue: { value: number, valueText: string }) => string), font?: Font, format?: Format | undefined, hideFirstOrLast?: CircularGaugeLabelOverlap, indentFromTick?: number, overlappingBehavior?: LabelOverlap, useRangeColors?: boolean, visible?: boolean }, minorTick?: { color?: string, length?: number, opacity?: number, visible?: boolean, width?: number }, minorTickInterval?: number | undefined, orientation?: CircularGaugeElementOrientation, scaleDivisionFactor?: number, startValue?: number, tick?: { color?: string, length?: number, opacity?: number, visible?: boolean, width?: number }, tickInterval?: number | undefined }>;
 
     /**
     
@@ -604,7 +604,7 @@ export class DxCircularGaugeComponent extends DxComponent implements OnDestroy,
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() subvaluesChange: EventEmitter<Array<number>>;
+    @Output() subvaluesChange: EventEmitter<Array<number> | undefined>;
 
     /**
     
@@ -618,7 +618,7 @@ export class DxCircularGaugeComponent extends DxComponent implements OnDestroy,
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() titleChange: EventEmitter<string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }>;
+    @Output() titleChange: EventEmitter<string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string | undefined, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/circular-gauge/nested/scale.ts b/packages/devextreme-angular/src/ui/circular-gauge/nested/scale.ts
index 239c6b4be532..691d7769e23f 100644
--- a/packages/devextreme-angular/src/ui/circular-gauge/nested/scale.ts
+++ b/packages/devextreme-angular/src/ui/circular-gauge/nested/scale.ts
@@ -42,18 +42,18 @@ export class DxoCircularGaugeScaleComponent extends NestedOption implements OnDe
     }
 
     @Input()
-    get customMinorTicks(): Array<number> {
+    get customMinorTicks(): Array<number> | undefined {
         return this._getOption('customMinorTicks');
     }
-    set customMinorTicks(value: Array<number>) {
+    set customMinorTicks(value: Array<number> | undefined) {
         this._setOption('customMinorTicks', value);
     }
 
     @Input()
-    get customTicks(): Array<number> {
+    get customTicks(): Array<number> | undefined {
         return this._getOption('customTicks');
     }
-    set customTicks(value: Array<number>) {
+    set customTicks(value: Array<number> | undefined) {
         this._setOption('customTicks', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/circular-gauge/nested/subtitle.ts b/packages/devextreme-angular/src/ui/circular-gauge/nested/subtitle.ts
index 2c70ef0174c5..251b6964445e 100644
--- a/packages/devextreme-angular/src/ui/circular-gauge/nested/subtitle.ts
+++ b/packages/devextreme-angular/src/ui/circular-gauge/nested/subtitle.ts
@@ -48,10 +48,10 @@ export class DxoCircularGaugeSubtitleComponent extends NestedOption implements O
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/circular-gauge/nested/title.ts b/packages/devextreme-angular/src/ui/circular-gauge/nested/title.ts
index c1878b020af3..8ac2342fb63a 100644
--- a/packages/devextreme-angular/src/ui/circular-gauge/nested/title.ts
+++ b/packages/devextreme-angular/src/ui/circular-gauge/nested/title.ts
@@ -65,18 +65,18 @@ export class DxoCircularGaugeTitleComponent extends NestedOption implements OnDe
     }
 
     @Input()
-    get subtitle(): string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap } {
+    get subtitle(): string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap } {
         return this._getOption('subtitle');
     }
-    set subtitle(value: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }) {
+    set subtitle(value: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }) {
         this._setOption('subtitle', value);
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/color-box/index.ts b/packages/devextreme-angular/src/ui/color-box/index.ts
index 20d2c0adaf08..6092c2410fa2 100644
--- a/packages/devextreme-angular/src/ui/color-box/index.ts
+++ b/packages/devextreme-angular/src/ui/color-box/index.ts
@@ -191,10 +191,10 @@ export class DxColorBoxComponent extends DxComponent implements OnDestroy, Contr
     
      */
     @Input()
-    get buttons(): Array<DropDownPredefinedButton | TextEditorButton> {
+    get buttons(): Array<DropDownPredefinedButton | TextEditorButton> | undefined {
         return this._getOption('buttons');
     }
-    set buttons(value: Array<DropDownPredefinedButton | TextEditorButton>) {
+    set buttons(value: Array<DropDownPredefinedButton | TextEditorButton> | undefined) {
         this._setOption('buttons', value);
     }
 
@@ -596,10 +596,10 @@ export class DxColorBoxComponent extends DxComponent implements OnDestroy, Contr
     
      */
     @Input()
-    get validationError(): any {
+    get validationError(): any | null {
         return this._getOption('validationError');
     }
-    set validationError(value: any) {
+    set validationError(value: any | null) {
         this._setOption('validationError', value);
     }
 
@@ -609,10 +609,10 @@ export class DxColorBoxComponent extends DxComponent implements OnDestroy, Contr
     
      */
     @Input()
-    get validationErrors(): Array<any> {
+    get validationErrors(): Array<any> | null {
         return this._getOption('validationErrors');
     }
-    set validationErrors(value: Array<any>) {
+    set validationErrors(value: Array<any> | null) {
         this._setOption('validationErrors', value);
     }
 
@@ -862,7 +862,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() buttonsChange: EventEmitter<Array<DropDownPredefinedButton | TextEditorButton>>;
+    @Output() buttonsChange: EventEmitter<Array<DropDownPredefinedButton | TextEditorButton> | undefined>;
 
     /**
     
@@ -1079,14 +1079,14 @@ 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() validationErrorChange: EventEmitter<any>;
+    @Output() validationErrorChange: EventEmitter<any | null>;
 
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorsChange: EventEmitter<Array<any>>;
+    @Output() validationErrorsChange: EventEmitter<Array<any> | null>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/color-box/nested/drop-down-options.ts b/packages/devextreme-angular/src/ui/color-box/nested/drop-down-options.ts
index 77a9990d9696..6c85fcf886f5 100644
--- a/packages/devextreme-angular/src/ui/color-box/nested/drop-down-options.ts
+++ b/packages/devextreme-angular/src/ui/color-box/nested/drop-down-options.ts
@@ -220,18 +220,18 @@ export class DxoColorBoxDropDownOptionsComponent extends NestedOption implements
     }
 
     @Input()
-    get onContentReady(): ((e: EventInfo<any>) => void) {
+    get onContentReady(): ((e: EventInfo<any>) => void) | undefined {
         return this._getOption('onContentReady');
     }
-    set onContentReady(value: ((e: EventInfo<any>) => void)) {
+    set onContentReady(value: ((e: EventInfo<any>) => void) | undefined) {
         this._setOption('onContentReady', value);
     }
 
     @Input()
-    get onDisposing(): ((e: EventInfo<any>) => void) {
+    get onDisposing(): ((e: EventInfo<any>) => void) | undefined {
         return this._getOption('onDisposing');
     }
-    set onDisposing(value: ((e: EventInfo<any>) => void)) {
+    set onDisposing(value: ((e: EventInfo<any>) => void) | undefined) {
         this._setOption('onDisposing', value);
     }
 
@@ -252,42 +252,42 @@ export class DxoColorBoxDropDownOptionsComponent extends NestedOption implements
     }
 
     @Input()
-    get onInitialized(): ((e: { component: CoreComponent<any>, element: any }) => void) {
+    get onInitialized(): ((e: { component: CoreComponent<any>, element: any }) => void) | undefined {
         return this._getOption('onInitialized');
     }
-    set onInitialized(value: ((e: { component: CoreComponent<any>, element: any }) => void)) {
+    set onInitialized(value: ((e: { component: CoreComponent<any>, element: any }) => void) | undefined) {
         this._setOption('onInitialized', value);
     }
 
     @Input()
-    get onOptionChanged(): ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) {
+    get onOptionChanged(): ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) | undefined {
         return this._getOption('onOptionChanged');
     }
-    set onOptionChanged(value: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void)) {
+    set onOptionChanged(value: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) | undefined) {
         this._setOption('onOptionChanged', value);
     }
 
     @Input()
-    get onResize(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) {
+    get onResize(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined {
         return this._getOption('onResize');
     }
-    set onResize(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)) {
+    set onResize(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined) {
         this._setOption('onResize', value);
     }
 
     @Input()
-    get onResizeEnd(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) {
+    get onResizeEnd(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined {
         return this._getOption('onResizeEnd');
     }
-    set onResizeEnd(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)) {
+    set onResizeEnd(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined) {
         this._setOption('onResizeEnd', value);
     }
 
     @Input()
-    get onResizeStart(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) {
+    get onResizeStart(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined {
         return this._getOption('onResizeStart');
     }
-    set onResizeStart(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)) {
+    set onResizeStart(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined) {
         this._setOption('onResizeStart', value);
     }
 
@@ -308,10 +308,10 @@ export class DxoColorBoxDropDownOptionsComponent extends NestedOption implements
     }
 
     @Input()
-    get onTitleRendered(): ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) {
+    get onTitleRendered(): ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) | undefined {
         return this._getOption('onTitleRendered');
     }
-    set onTitleRendered(value: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void)) {
+    set onTitleRendered(value: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) | undefined) {
         this._setOption('onTitleRendered', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/color-box/nested/options.ts b/packages/devextreme-angular/src/ui/color-box/nested/options.ts
index 750ca7ef6b0a..4b4e6a67c349 100644
--- a/packages/devextreme-angular/src/ui/color-box/nested/options.ts
+++ b/packages/devextreme-angular/src/ui/color-box/nested/options.ts
@@ -114,10 +114,10 @@ export class DxoColorBoxOptionsComponent extends NestedOption implements AfterVi
     }
 
     @Input()
-    get onClick(): ((e: ClickEvent) => void) {
+    get onClick(): ((e: ClickEvent) => void) | undefined {
         return this._getOption('onClick');
     }
-    set onClick(value: ((e: ClickEvent) => void)) {
+    set onClick(value: ((e: ClickEvent) => void) | undefined) {
         this._setOption('onClick', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/context-menu/index.ts b/packages/devextreme-angular/src/ui/context-menu/index.ts
index b5739b849ed0..37784f2ecb52 100644
--- a/packages/devextreme-angular/src/ui/context-menu/index.ts
+++ b/packages/devextreme-angular/src/ui/context-menu/index.ts
@@ -383,10 +383,10 @@ export class DxContextMenuComponent<TItem = any, TKey = any> extends DxComponent
     
      */
     @Input()
-    get selectedItem(): any {
+    get selectedItem(): any | null {
         return this._getOption('selectedItem');
     }
-    set selectedItem(value: any) {
+    set selectedItem(value: any | null) {
         this._setOption('selectedItem', value);
     }
 
@@ -750,7 +750,7 @@ export class DxContextMenuComponent<TItem = any, TKey = any> extends DxComponent
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() selectedItemChange: EventEmitter<any>;
+    @Output() selectedItemChange: EventEmitter<any | null>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/button-options.ts b/packages/devextreme-angular/src/ui/data-grid/nested/button-options.ts
index 79a74641cc5c..9a0493dccb43 100644
--- a/packages/devextreme-angular/src/ui/data-grid/nested/button-options.ts
+++ b/packages/devextreme-angular/src/ui/data-grid/nested/button-options.ts
@@ -114,10 +114,10 @@ export class DxoDataGridButtonOptionsComponent extends NestedOption implements A
     }
 
     @Input()
-    get onClick(): ((e: ClickEvent) => void) {
+    get onClick(): ((e: ClickEvent) => void) | undefined {
         return this._getOption('onClick');
     }
-    set onClick(value: ((e: ClickEvent) => void)) {
+    set onClick(value: ((e: ClickEvent) => void) | undefined) {
         this._setOption('onClick', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/editor-options.ts b/packages/devextreme-angular/src/ui/data-grid/nested/editor-options.ts
index 192029a59ccc..465c004587e0 100644
--- a/packages/devextreme-angular/src/ui/data-grid/nested/editor-options.ts
+++ b/packages/devextreme-angular/src/ui/data-grid/nested/editor-options.ts
@@ -62,10 +62,10 @@ export class DxoDataGridEditorOptionsComponent extends NestedOption implements O
     }
 
     @Input()
-    get buttons(): Array<string | TextBoxPredefinedButton | TextEditorButton> {
+    get buttons(): Array<string | TextBoxPredefinedButton | TextEditorButton> | undefined {
         return this._getOption('buttons');
     }
-    set buttons(value: Array<string | TextBoxPredefinedButton | TextEditorButton>) {
+    set buttons(value: Array<string | TextBoxPredefinedButton | TextEditorButton> | undefined) {
         this._setOption('buttons', value);
     }
 
@@ -190,10 +190,10 @@ export class DxoDataGridEditorOptionsComponent extends NestedOption implements O
     }
 
     @Input()
-    get maxLength(): number | string {
+    get maxLength(): null | number | string {
         return this._getOption('maxLength');
     }
-    set maxLength(value: number | string) {
+    set maxLength(value: null | number | string) {
         this._setOption('maxLength', value);
     }
 
@@ -414,18 +414,18 @@ export class DxoDataGridEditorOptionsComponent extends NestedOption implements O
     }
 
     @Input()
-    get validationError(): any {
+    get validationError(): any | null {
         return this._getOption('validationError');
     }
-    set validationError(value: any) {
+    set validationError(value: any | null) {
         this._setOption('validationError', value);
     }
 
     @Input()
-    get validationErrors(): Array<any> {
+    get validationErrors(): Array<any> | null {
         return this._getOption('validationErrors');
     }
-    set validationErrors(value: Array<any>) {
+    set validationErrors(value: Array<any> | null) {
         this._setOption('validationErrors', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/filter-builder-popup.ts b/packages/devextreme-angular/src/ui/data-grid/nested/filter-builder-popup.ts
index 73fc0fb98d47..a0b1e1170848 100644
--- a/packages/devextreme-angular/src/ui/data-grid/nested/filter-builder-popup.ts
+++ b/packages/devextreme-angular/src/ui/data-grid/nested/filter-builder-popup.ts
@@ -220,18 +220,18 @@ export class DxoDataGridFilterBuilderPopupComponent extends NestedOption impleme
     }
 
     @Input()
-    get onContentReady(): ((e: EventInfo<any>) => void) {
+    get onContentReady(): ((e: EventInfo<any>) => void) | undefined {
         return this._getOption('onContentReady');
     }
-    set onContentReady(value: ((e: EventInfo<any>) => void)) {
+    set onContentReady(value: ((e: EventInfo<any>) => void) | undefined) {
         this._setOption('onContentReady', value);
     }
 
     @Input()
-    get onDisposing(): ((e: EventInfo<any>) => void) {
+    get onDisposing(): ((e: EventInfo<any>) => void) | undefined {
         return this._getOption('onDisposing');
     }
-    set onDisposing(value: ((e: EventInfo<any>) => void)) {
+    set onDisposing(value: ((e: EventInfo<any>) => void) | undefined) {
         this._setOption('onDisposing', value);
     }
 
@@ -252,42 +252,42 @@ export class DxoDataGridFilterBuilderPopupComponent extends NestedOption impleme
     }
 
     @Input()
-    get onInitialized(): ((e: { component: CoreComponent<any>, element: any }) => void) {
+    get onInitialized(): ((e: { component: CoreComponent<any>, element: any }) => void) | undefined {
         return this._getOption('onInitialized');
     }
-    set onInitialized(value: ((e: { component: CoreComponent<any>, element: any }) => void)) {
+    set onInitialized(value: ((e: { component: CoreComponent<any>, element: any }) => void) | undefined) {
         this._setOption('onInitialized', value);
     }
 
     @Input()
-    get onOptionChanged(): ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) {
+    get onOptionChanged(): ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) | undefined {
         return this._getOption('onOptionChanged');
     }
-    set onOptionChanged(value: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void)) {
+    set onOptionChanged(value: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) | undefined) {
         this._setOption('onOptionChanged', value);
     }
 
     @Input()
-    get onResize(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) {
+    get onResize(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined {
         return this._getOption('onResize');
     }
-    set onResize(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)) {
+    set onResize(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined) {
         this._setOption('onResize', value);
     }
 
     @Input()
-    get onResizeEnd(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) {
+    get onResizeEnd(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined {
         return this._getOption('onResizeEnd');
     }
-    set onResizeEnd(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)) {
+    set onResizeEnd(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined) {
         this._setOption('onResizeEnd', value);
     }
 
     @Input()
-    get onResizeStart(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) {
+    get onResizeStart(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined {
         return this._getOption('onResizeStart');
     }
-    set onResizeStart(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)) {
+    set onResizeStart(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined) {
         this._setOption('onResizeStart', value);
     }
 
@@ -308,10 +308,10 @@ export class DxoDataGridFilterBuilderPopupComponent extends NestedOption impleme
     }
 
     @Input()
-    get onTitleRendered(): ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) {
+    get onTitleRendered(): ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) | undefined {
         return this._getOption('onTitleRendered');
     }
-    set onTitleRendered(value: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void)) {
+    set onTitleRendered(value: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) | undefined) {
         this._setOption('onTitleRendered', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/form.ts b/packages/devextreme-angular/src/ui/data-grid/nested/form.ts
index c02f020bfbcf..020f2251913f 100644
--- a/packages/devextreme-angular/src/ui/data-grid/nested/form.ts
+++ b/packages/devextreme-angular/src/ui/data-grid/nested/form.ts
@@ -223,18 +223,18 @@ export class DxoDataGridFormComponent extends NestedOption implements OnDestroy,
     }
 
     @Input()
-    get onEditorEnterKey(): ((e: EditorEnterKeyEvent) => void) {
+    get onEditorEnterKey(): ((e: EditorEnterKeyEvent) => void) | undefined {
         return this._getOption('onEditorEnterKey');
     }
-    set onEditorEnterKey(value: ((e: EditorEnterKeyEvent) => void)) {
+    set onEditorEnterKey(value: ((e: EditorEnterKeyEvent) => void) | undefined) {
         this._setOption('onEditorEnterKey', value);
     }
 
     @Input()
-    get onFieldDataChanged(): ((e: FieldDataChangedEvent) => void) {
+    get onFieldDataChanged(): ((e: FieldDataChangedEvent) => void) | undefined {
         return this._getOption('onFieldDataChanged');
     }
-    set onFieldDataChanged(value: ((e: FieldDataChangedEvent) => void)) {
+    set onFieldDataChanged(value: ((e: FieldDataChangedEvent) => void) | undefined) {
         this._setOption('onFieldDataChanged', value);
     }
 
@@ -255,18 +255,18 @@ export class DxoDataGridFormComponent extends NestedOption implements OnDestroy,
     }
 
     @Input()
-    get onSmartPasted(): ((e: SmartPastedEvent) => void) {
+    get onSmartPasted(): ((e: SmartPastedEvent) => void) | undefined {
         return this._getOption('onSmartPasted');
     }
-    set onSmartPasted(value: ((e: SmartPastedEvent) => void)) {
+    set onSmartPasted(value: ((e: SmartPastedEvent) => void) | undefined) {
         this._setOption('onSmartPasted', value);
     }
 
     @Input()
-    get onSmartPasting(): ((e: SmartPastingEvent) => void) {
+    get onSmartPasting(): ((e: SmartPastingEvent) => void) | undefined {
         return this._getOption('onSmartPasting');
     }
-    set onSmartPasting(value: ((e: SmartPastingEvent) => void)) {
+    set onSmartPasting(value: ((e: SmartPastingEvent) => void) | undefined) {
         this._setOption('onSmartPasting', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/options.ts b/packages/devextreme-angular/src/ui/data-grid/nested/options.ts
index b63ffa0174d4..92a7df7ca994 100644
--- a/packages/devextreme-angular/src/ui/data-grid/nested/options.ts
+++ b/packages/devextreme-angular/src/ui/data-grid/nested/options.ts
@@ -114,10 +114,10 @@ export class DxoDataGridOptionsComponent extends NestedOption implements AfterVi
     }
 
     @Input()
-    get onClick(): ((e: ClickEvent) => void) {
+    get onClick(): ((e: ClickEvent) => void) | undefined {
         return this._getOption('onClick');
     }
-    set onClick(value: ((e: ClickEvent) => void)) {
+    set onClick(value: ((e: ClickEvent) => void) | undefined) {
         this._setOption('onClick', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/popup.ts b/packages/devextreme-angular/src/ui/data-grid/nested/popup.ts
index 431d28a24541..7c9c3e5f9971 100644
--- a/packages/devextreme-angular/src/ui/data-grid/nested/popup.ts
+++ b/packages/devextreme-angular/src/ui/data-grid/nested/popup.ts
@@ -220,18 +220,18 @@ export class DxoDataGridPopupComponent extends NestedOption implements OnDestroy
     }
 
     @Input()
-    get onContentReady(): ((e: EventInfo<any>) => void) {
+    get onContentReady(): ((e: EventInfo<any>) => void) | undefined {
         return this._getOption('onContentReady');
     }
-    set onContentReady(value: ((e: EventInfo<any>) => void)) {
+    set onContentReady(value: ((e: EventInfo<any>) => void) | undefined) {
         this._setOption('onContentReady', value);
     }
 
     @Input()
-    get onDisposing(): ((e: EventInfo<any>) => void) {
+    get onDisposing(): ((e: EventInfo<any>) => void) | undefined {
         return this._getOption('onDisposing');
     }
-    set onDisposing(value: ((e: EventInfo<any>) => void)) {
+    set onDisposing(value: ((e: EventInfo<any>) => void) | undefined) {
         this._setOption('onDisposing', value);
     }
 
@@ -252,42 +252,42 @@ export class DxoDataGridPopupComponent extends NestedOption implements OnDestroy
     }
 
     @Input()
-    get onInitialized(): ((e: { component: CoreComponent<any>, element: any }) => void) {
+    get onInitialized(): ((e: { component: CoreComponent<any>, element: any }) => void) | undefined {
         return this._getOption('onInitialized');
     }
-    set onInitialized(value: ((e: { component: CoreComponent<any>, element: any }) => void)) {
+    set onInitialized(value: ((e: { component: CoreComponent<any>, element: any }) => void) | undefined) {
         this._setOption('onInitialized', value);
     }
 
     @Input()
-    get onOptionChanged(): ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) {
+    get onOptionChanged(): ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) | undefined {
         return this._getOption('onOptionChanged');
     }
-    set onOptionChanged(value: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void)) {
+    set onOptionChanged(value: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) | undefined) {
         this._setOption('onOptionChanged', value);
     }
 
     @Input()
-    get onResize(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) {
+    get onResize(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined {
         return this._getOption('onResize');
     }
-    set onResize(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)) {
+    set onResize(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined) {
         this._setOption('onResize', value);
     }
 
     @Input()
-    get onResizeEnd(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) {
+    get onResizeEnd(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined {
         return this._getOption('onResizeEnd');
     }
-    set onResizeEnd(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)) {
+    set onResizeEnd(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined) {
         this._setOption('onResizeEnd', value);
     }
 
     @Input()
-    get onResizeStart(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) {
+    get onResizeStart(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined {
         return this._getOption('onResizeStart');
     }
-    set onResizeStart(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)) {
+    set onResizeStart(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined) {
         this._setOption('onResizeStart', value);
     }
 
@@ -308,10 +308,10 @@ export class DxoDataGridPopupComponent extends NestedOption implements OnDestroy
     }
 
     @Input()
-    get onTitleRendered(): ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) {
+    get onTitleRendered(): ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) | undefined {
         return this._getOption('onTitleRendered');
     }
-    set onTitleRendered(value: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void)) {
+    set onTitleRendered(value: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) | undefined) {
         this._setOption('onTitleRendered', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/tab-panel-options.ts b/packages/devextreme-angular/src/ui/data-grid/nested/tab-panel-options.ts
index 98901506fe79..13355696e2e2 100644
--- a/packages/devextreme-angular/src/ui/data-grid/nested/tab-panel-options.ts
+++ b/packages/devextreme-angular/src/ui/data-grid/nested/tab-panel-options.ts
@@ -288,18 +288,18 @@ export class DxoDataGridTabPanelOptionsComponent extends NestedOption implements
     }
 
     @Input()
-    get onTitleHold(): ((e: TitleHoldEvent) => void) {
+    get onTitleHold(): ((e: TitleHoldEvent) => void) | undefined {
         return this._getOption('onTitleHold');
     }
-    set onTitleHold(value: ((e: TitleHoldEvent) => void)) {
+    set onTitleHold(value: ((e: TitleHoldEvent) => void) | undefined) {
         this._setOption('onTitleHold', value);
     }
 
     @Input()
-    get onTitleRendered(): ((e: TitleRenderedEvent) => void) {
+    get onTitleRendered(): ((e: TitleRenderedEvent) => void) | undefined {
         return this._getOption('onTitleRendered');
     }
-    set onTitleRendered(value: ((e: TitleRenderedEvent) => void)) {
+    set onTitleRendered(value: ((e: TitleRenderedEvent) => void) | undefined) {
         this._setOption('onTitleRendered', value);
     }
 
@@ -344,10 +344,10 @@ export class DxoDataGridTabPanelOptionsComponent extends NestedOption implements
     }
 
     @Input()
-    get selectedItem(): any {
+    get selectedItem(): any | null {
         return this._getOption('selectedItem');
     }
-    set selectedItem(value: any) {
+    set selectedItem(value: any | null) {
         this._setOption('selectedItem', value);
     }
 
@@ -427,7 +427,7 @@ export class DxoDataGridTabPanelOptionsComponent extends NestedOption implements
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() selectedItemChange: EventEmitter<any>;
+    @Output() selectedItemChange: EventEmitter<any | null>;
     protected get _optionPath() {
         return 'tabPanelOptions';
     }
diff --git a/packages/devextreme-angular/src/ui/date-box/index.ts b/packages/devextreme-angular/src/ui/date-box/index.ts
index 744438fb238e..c5c81e7e990a 100644
--- a/packages/devextreme-angular/src/ui/date-box/index.ts
+++ b/packages/devextreme-angular/src/ui/date-box/index.ts
@@ -209,10 +209,10 @@ export class DxDateBoxComponent extends DxComponent implements OnDestroy, Contro
     
      */
     @Input()
-    get buttons(): Array<DropDownPredefinedButton | TextEditorButton> {
+    get buttons(): Array<DropDownPredefinedButton | TextEditorButton> | undefined {
         return this._getOption('buttons');
     }
-    set buttons(value: Array<DropDownPredefinedButton | TextEditorButton>) {
+    set buttons(value: Array<DropDownPredefinedButton | TextEditorButton> | undefined) {
         this._setOption('buttons', value);
     }
 
@@ -300,10 +300,10 @@ export class DxDateBoxComponent extends DxComponent implements OnDestroy, Contro
     
      */
     @Input()
-    get disabledDates(): Array<Date> | ((data: { component: dxDateBox, date: Date, view: string }) => boolean) {
+    get disabledDates(): Array<Date> | ((data: { component: dxDateBox, date: Date, view: string }) => boolean) | null {
         return this._getOption('disabledDates');
     }
-    set disabledDates(value: Array<Date> | ((data: { component: dxDateBox, date: Date, view: string }) => boolean)) {
+    set disabledDates(value: Array<Date> | ((data: { component: dxDateBox, date: Date, view: string }) => boolean) | null) {
         this._setOption('disabledDates', value);
     }
 
@@ -313,10 +313,10 @@ export class DxDateBoxComponent extends DxComponent implements OnDestroy, Contro
     
      */
     @Input()
-    get displayFormat(): Format {
+    get displayFormat(): Format | null {
         return this._getOption('displayFormat');
     }
-    set displayFormat(value: Format) {
+    set displayFormat(value: Format | null) {
         this._setOption('displayFormat', value);
     }
 
@@ -521,10 +521,10 @@ export class DxDateBoxComponent extends DxComponent implements OnDestroy, Contro
     
      */
     @Input()
-    get maxLength(): number | string {
+    get maxLength(): null | number | string {
         return this._getOption('maxLength');
     }
-    set maxLength(value: number | string) {
+    set maxLength(value: null | number | string) {
         this._setOption('maxLength', value);
     }
 
@@ -768,10 +768,10 @@ export class DxDateBoxComponent extends DxComponent implements OnDestroy, Contro
     
      */
     @Input()
-    get validationError(): any {
+    get validationError(): any | null {
         return this._getOption('validationError');
     }
-    set validationError(value: any) {
+    set validationError(value: any | null) {
         this._setOption('validationError', value);
     }
 
@@ -781,10 +781,10 @@ export class DxDateBoxComponent extends DxComponent implements OnDestroy, Contro
     
      */
     @Input()
-    get validationErrors(): Array<any> {
+    get validationErrors(): Array<any> | null {
         return this._getOption('validationErrors');
     }
-    set validationErrors(value: Array<any>) {
+    set validationErrors(value: Array<any> | null) {
         this._setOption('validationErrors', value);
     }
 
@@ -1062,7 +1062,7 @@ export class DxDateBoxComponent extends DxComponent implements OnDestroy, Contro
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() buttonsChange: EventEmitter<Array<DropDownPredefinedButton | TextEditorButton>>;
+    @Output() buttonsChange: EventEmitter<Array<DropDownPredefinedButton | TextEditorButton> | undefined>;
 
     /**
     
@@ -1111,14 +1111,14 @@ export class DxDateBoxComponent extends DxComponent implements OnDestroy, Contro
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() disabledDatesChange: EventEmitter<Array<Date> | ((data: { component: dxDateBox, date: Date, view: string }) => boolean)>;
+    @Output() disabledDatesChange: EventEmitter<Array<Date> | ((data: { component: dxDateBox, date: Date, view: string }) => boolean) | null>;
 
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() displayFormatChange: EventEmitter<Format>;
+    @Output() displayFormatChange: EventEmitter<Format | null>;
 
     /**
     
@@ -1230,7 +1230,7 @@ export class DxDateBoxComponent extends DxComponent implements OnDestroy, Contro
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() maxLengthChange: EventEmitter<number | string>;
+    @Output() maxLengthChange: EventEmitter<null | number | string>;
 
     /**
     
@@ -1363,14 +1363,14 @@ export class DxDateBoxComponent extends DxComponent implements OnDestroy, Contro
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorChange: EventEmitter<any>;
+    @Output() validationErrorChange: EventEmitter<any | null>;
 
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorsChange: EventEmitter<Array<any>>;
+    @Output() validationErrorsChange: EventEmitter<Array<any> | null>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/date-box/nested/calendar-options.ts b/packages/devextreme-angular/src/ui/date-box/nested/calendar-options.ts
index 2ed403d02ea2..4fe7e083e1cb 100644
--- a/packages/devextreme-angular/src/ui/date-box/nested/calendar-options.ts
+++ b/packages/devextreme-angular/src/ui/date-box/nested/calendar-options.ts
@@ -75,10 +75,10 @@ export class DxoDateBoxCalendarOptionsComponent extends NestedOption implements
     }
 
     @Input()
-    get disabledDates(): Array<Date> | ((data: DisabledDate) => boolean) {
+    get disabledDates(): Array<Date> | ((data: DisabledDate) => boolean) | null {
         return this._getOption('disabledDates');
     }
-    set disabledDates(value: Array<Date> | ((data: DisabledDate) => boolean)) {
+    set disabledDates(value: Array<Date> | ((data: DisabledDate) => boolean) | null) {
         this._setOption('disabledDates', value);
     }
 
@@ -283,18 +283,18 @@ export class DxoDateBoxCalendarOptionsComponent extends NestedOption implements
     }
 
     @Input()
-    get validationError(): any {
+    get validationError(): any | null {
         return this._getOption('validationError');
     }
-    set validationError(value: any) {
+    set validationError(value: any | null) {
         this._setOption('validationError', value);
     }
 
     @Input()
-    get validationErrors(): Array<any> {
+    get validationErrors(): Array<any> | null {
         return this._getOption('validationErrors');
     }
-    set validationErrors(value: Array<any>) {
+    set validationErrors(value: Array<any> | null) {
         this._setOption('validationErrors', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/date-box/nested/drop-down-options.ts b/packages/devextreme-angular/src/ui/date-box/nested/drop-down-options.ts
index d3af22341acd..a34e30d591b0 100644
--- a/packages/devextreme-angular/src/ui/date-box/nested/drop-down-options.ts
+++ b/packages/devextreme-angular/src/ui/date-box/nested/drop-down-options.ts
@@ -220,18 +220,18 @@ export class DxoDateBoxDropDownOptionsComponent extends NestedOption implements
     }
 
     @Input()
-    get onContentReady(): ((e: EventInfo<any>) => void) {
+    get onContentReady(): ((e: EventInfo<any>) => void) | undefined {
         return this._getOption('onContentReady');
     }
-    set onContentReady(value: ((e: EventInfo<any>) => void)) {
+    set onContentReady(value: ((e: EventInfo<any>) => void) | undefined) {
         this._setOption('onContentReady', value);
     }
 
     @Input()
-    get onDisposing(): ((e: EventInfo<any>) => void) {
+    get onDisposing(): ((e: EventInfo<any>) => void) | undefined {
         return this._getOption('onDisposing');
     }
-    set onDisposing(value: ((e: EventInfo<any>) => void)) {
+    set onDisposing(value: ((e: EventInfo<any>) => void) | undefined) {
         this._setOption('onDisposing', value);
     }
 
@@ -252,42 +252,42 @@ export class DxoDateBoxDropDownOptionsComponent extends NestedOption implements
     }
 
     @Input()
-    get onInitialized(): ((e: { component: CoreComponent<any>, element: any }) => void) {
+    get onInitialized(): ((e: { component: CoreComponent<any>, element: any }) => void) | undefined {
         return this._getOption('onInitialized');
     }
-    set onInitialized(value: ((e: { component: CoreComponent<any>, element: any }) => void)) {
+    set onInitialized(value: ((e: { component: CoreComponent<any>, element: any }) => void) | undefined) {
         this._setOption('onInitialized', value);
     }
 
     @Input()
-    get onOptionChanged(): ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) {
+    get onOptionChanged(): ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) | undefined {
         return this._getOption('onOptionChanged');
     }
-    set onOptionChanged(value: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void)) {
+    set onOptionChanged(value: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) | undefined) {
         this._setOption('onOptionChanged', value);
     }
 
     @Input()
-    get onResize(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) {
+    get onResize(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined {
         return this._getOption('onResize');
     }
-    set onResize(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)) {
+    set onResize(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined) {
         this._setOption('onResize', value);
     }
 
     @Input()
-    get onResizeEnd(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) {
+    get onResizeEnd(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined {
         return this._getOption('onResizeEnd');
     }
-    set onResizeEnd(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)) {
+    set onResizeEnd(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined) {
         this._setOption('onResizeEnd', value);
     }
 
     @Input()
-    get onResizeStart(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) {
+    get onResizeStart(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined {
         return this._getOption('onResizeStart');
     }
-    set onResizeStart(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)) {
+    set onResizeStart(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined) {
         this._setOption('onResizeStart', value);
     }
 
@@ -308,10 +308,10 @@ export class DxoDateBoxDropDownOptionsComponent extends NestedOption implements
     }
 
     @Input()
-    get onTitleRendered(): ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) {
+    get onTitleRendered(): ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) | undefined {
         return this._getOption('onTitleRendered');
     }
-    set onTitleRendered(value: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void)) {
+    set onTitleRendered(value: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) | undefined) {
         this._setOption('onTitleRendered', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/date-box/nested/options.ts b/packages/devextreme-angular/src/ui/date-box/nested/options.ts
index 492bb57d5203..15b64f6e0b6b 100644
--- a/packages/devextreme-angular/src/ui/date-box/nested/options.ts
+++ b/packages/devextreme-angular/src/ui/date-box/nested/options.ts
@@ -114,10 +114,10 @@ export class DxoDateBoxOptionsComponent extends NestedOption implements AfterVie
     }
 
     @Input()
-    get onClick(): ((e: ClickEvent) => void) {
+    get onClick(): ((e: ClickEvent) => void) | undefined {
         return this._getOption('onClick');
     }
-    set onClick(value: ((e: ClickEvent) => void)) {
+    set onClick(value: ((e: ClickEvent) => void) | undefined) {
         this._setOption('onClick', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/date-range-box/index.ts b/packages/devextreme-angular/src/ui/date-range-box/index.ts
index 5b40ba0eaed4..c4da13876682 100644
--- a/packages/devextreme-angular/src/ui/date-range-box/index.ts
+++ b/packages/devextreme-angular/src/ui/date-range-box/index.ts
@@ -196,10 +196,10 @@ export class DxDateRangeBoxComponent extends DxComponent implements OnDestroy, C
     
      */
     @Input()
-    get buttons(): Array<DropDownPredefinedButton | TextEditorButton> {
+    get buttons(): Array<DropDownPredefinedButton | TextEditorButton> | undefined {
         return this._getOption('buttons');
     }
-    set buttons(value: Array<DropDownPredefinedButton | TextEditorButton>) {
+    set buttons(value: Array<DropDownPredefinedButton | TextEditorButton> | undefined) {
         this._setOption('buttons', value);
     }
 
@@ -287,10 +287,10 @@ export class DxDateRangeBoxComponent extends DxComponent implements OnDestroy, C
     
      */
     @Input()
-    get displayFormat(): Format {
+    get displayFormat(): Format | null {
         return this._getOption('displayFormat');
     }
-    set displayFormat(value: Format) {
+    set displayFormat(value: Format | null) {
         this._setOption('displayFormat', value);
     }
 
@@ -820,10 +820,10 @@ export class DxDateRangeBoxComponent extends DxComponent implements OnDestroy, C
     
      */
     @Input()
-    get validationError(): any {
+    get validationError(): any | null {
         return this._getOption('validationError');
     }
-    set validationError(value: any) {
+    set validationError(value: any | null) {
         this._setOption('validationError', value);
     }
 
@@ -833,10 +833,10 @@ export class DxDateRangeBoxComponent extends DxComponent implements OnDestroy, C
     
      */
     @Input()
-    get validationErrors(): Array<any> {
+    get validationErrors(): Array<any> | null {
         return this._getOption('validationErrors');
     }
-    set validationErrors(value: Array<any>) {
+    set validationErrors(value: Array<any> | null) {
         this._setOption('validationErrors', value);
     }
 
@@ -1107,7 +1107,7 @@ export class DxDateRangeBoxComponent extends DxComponent implements OnDestroy, C
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() buttonsChange: EventEmitter<Array<DropDownPredefinedButton | TextEditorButton>>;
+    @Output() buttonsChange: EventEmitter<Array<DropDownPredefinedButton | TextEditorButton> | undefined>;
 
     /**
     
@@ -1156,7 +1156,7 @@ export class DxDateRangeBoxComponent extends DxComponent implements OnDestroy, C
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() displayFormatChange: EventEmitter<Format>;
+    @Output() displayFormatChange: EventEmitter<Format | null>;
 
     /**
     
@@ -1443,14 +1443,14 @@ export class DxDateRangeBoxComponent extends DxComponent implements OnDestroy, C
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorChange: EventEmitter<any>;
+    @Output() validationErrorChange: EventEmitter<any | null>;
 
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorsChange: EventEmitter<Array<any>>;
+    @Output() validationErrorsChange: EventEmitter<Array<any> | null>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/date-range-box/nested/calendar-options.ts b/packages/devextreme-angular/src/ui/date-range-box/nested/calendar-options.ts
index 963d1af9e858..446c000809e0 100644
--- a/packages/devextreme-angular/src/ui/date-range-box/nested/calendar-options.ts
+++ b/packages/devextreme-angular/src/ui/date-range-box/nested/calendar-options.ts
@@ -75,10 +75,10 @@ export class DxoDateRangeBoxCalendarOptionsComponent extends NestedOption implem
     }
 
     @Input()
-    get disabledDates(): Array<Date> | ((data: DisabledDate) => boolean) {
+    get disabledDates(): Array<Date> | ((data: DisabledDate) => boolean) | null {
         return this._getOption('disabledDates');
     }
-    set disabledDates(value: Array<Date> | ((data: DisabledDate) => boolean)) {
+    set disabledDates(value: Array<Date> | ((data: DisabledDate) => boolean) | null) {
         this._setOption('disabledDates', value);
     }
 
@@ -283,18 +283,18 @@ export class DxoDateRangeBoxCalendarOptionsComponent extends NestedOption implem
     }
 
     @Input()
-    get validationError(): any {
+    get validationError(): any | null {
         return this._getOption('validationError');
     }
-    set validationError(value: any) {
+    set validationError(value: any | null) {
         this._setOption('validationError', value);
     }
 
     @Input()
-    get validationErrors(): Array<any> {
+    get validationErrors(): Array<any> | null {
         return this._getOption('validationErrors');
     }
-    set validationErrors(value: Array<any>) {
+    set validationErrors(value: Array<any> | null) {
         this._setOption('validationErrors', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/date-range-box/nested/drop-down-options.ts b/packages/devextreme-angular/src/ui/date-range-box/nested/drop-down-options.ts
index 0df76fe7c323..90e889bf0e38 100644
--- a/packages/devextreme-angular/src/ui/date-range-box/nested/drop-down-options.ts
+++ b/packages/devextreme-angular/src/ui/date-range-box/nested/drop-down-options.ts
@@ -220,18 +220,18 @@ export class DxoDateRangeBoxDropDownOptionsComponent extends NestedOption implem
     }
 
     @Input()
-    get onContentReady(): ((e: EventInfo<any>) => void) {
+    get onContentReady(): ((e: EventInfo<any>) => void) | undefined {
         return this._getOption('onContentReady');
     }
-    set onContentReady(value: ((e: EventInfo<any>) => void)) {
+    set onContentReady(value: ((e: EventInfo<any>) => void) | undefined) {
         this._setOption('onContentReady', value);
     }
 
     @Input()
-    get onDisposing(): ((e: EventInfo<any>) => void) {
+    get onDisposing(): ((e: EventInfo<any>) => void) | undefined {
         return this._getOption('onDisposing');
     }
-    set onDisposing(value: ((e: EventInfo<any>) => void)) {
+    set onDisposing(value: ((e: EventInfo<any>) => void) | undefined) {
         this._setOption('onDisposing', value);
     }
 
@@ -252,42 +252,42 @@ export class DxoDateRangeBoxDropDownOptionsComponent extends NestedOption implem
     }
 
     @Input()
-    get onInitialized(): ((e: { component: CoreComponent<any>, element: any }) => void) {
+    get onInitialized(): ((e: { component: CoreComponent<any>, element: any }) => void) | undefined {
         return this._getOption('onInitialized');
     }
-    set onInitialized(value: ((e: { component: CoreComponent<any>, element: any }) => void)) {
+    set onInitialized(value: ((e: { component: CoreComponent<any>, element: any }) => void) | undefined) {
         this._setOption('onInitialized', value);
     }
 
     @Input()
-    get onOptionChanged(): ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) {
+    get onOptionChanged(): ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) | undefined {
         return this._getOption('onOptionChanged');
     }
-    set onOptionChanged(value: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void)) {
+    set onOptionChanged(value: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) | undefined) {
         this._setOption('onOptionChanged', value);
     }
 
     @Input()
-    get onResize(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) {
+    get onResize(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined {
         return this._getOption('onResize');
     }
-    set onResize(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)) {
+    set onResize(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined) {
         this._setOption('onResize', value);
     }
 
     @Input()
-    get onResizeEnd(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) {
+    get onResizeEnd(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined {
         return this._getOption('onResizeEnd');
     }
-    set onResizeEnd(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)) {
+    set onResizeEnd(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined) {
         this._setOption('onResizeEnd', value);
     }
 
     @Input()
-    get onResizeStart(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) {
+    get onResizeStart(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined {
         return this._getOption('onResizeStart');
     }
-    set onResizeStart(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)) {
+    set onResizeStart(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined) {
         this._setOption('onResizeStart', value);
     }
 
@@ -308,10 +308,10 @@ export class DxoDateRangeBoxDropDownOptionsComponent extends NestedOption implem
     }
 
     @Input()
-    get onTitleRendered(): ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) {
+    get onTitleRendered(): ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) | undefined {
         return this._getOption('onTitleRendered');
     }
-    set onTitleRendered(value: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void)) {
+    set onTitleRendered(value: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) | undefined) {
         this._setOption('onTitleRendered', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/date-range-box/nested/options.ts b/packages/devextreme-angular/src/ui/date-range-box/nested/options.ts
index eead7f296ddb..644bebf5a018 100644
--- a/packages/devextreme-angular/src/ui/date-range-box/nested/options.ts
+++ b/packages/devextreme-angular/src/ui/date-range-box/nested/options.ts
@@ -114,10 +114,10 @@ export class DxoDateRangeBoxOptionsComponent extends NestedOption implements Aft
     }
 
     @Input()
-    get onClick(): ((e: ClickEvent) => void) {
+    get onClick(): ((e: ClickEvent) => void) | undefined {
         return this._getOption('onClick');
     }
-    set onClick(value: ((e: ClickEvent) => void)) {
+    set onClick(value: ((e: ClickEvent) => void) | undefined) {
         this._setOption('onClick', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/drawer/index.ts b/packages/devextreme-angular/src/ui/drawer/index.ts
index a69211c9ac35..9f7dfb82725f 100644
--- a/packages/devextreme-angular/src/ui/drawer/index.ts
+++ b/packages/devextreme-angular/src/ui/drawer/index.ts
@@ -176,10 +176,10 @@ export class DxDrawerComponent extends DxComponent implements OnDestroy {
     
      */
     @Input()
-    get maxSize(): number {
+    get maxSize(): null | number {
         return this._getOption('maxSize');
     }
-    set maxSize(value: number) {
+    set maxSize(value: null | number) {
         this._setOption('maxSize', value);
     }
 
@@ -189,10 +189,10 @@ export class DxDrawerComponent extends DxComponent implements OnDestroy {
     
      */
     @Input()
-    get minSize(): number {
+    get minSize(): null | number {
         return this._getOption('minSize');
     }
-    set minSize(value: number) {
+    set minSize(value: null | number) {
         this._setOption('minSize', value);
     }
 
@@ -405,14 +405,14 @@ export class DxDrawerComponent extends DxComponent implements OnDestroy {
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() maxSizeChange: EventEmitter<number>;
+    @Output() maxSizeChange: EventEmitter<null | number>;
 
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() minSizeChange: EventEmitter<number>;
+    @Output() minSizeChange: EventEmitter<null | number>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/drop-down-box/index.ts b/packages/devextreme-angular/src/ui/drop-down-box/index.ts
index 41df829baca4..42e3bb39fde4 100644
--- a/packages/devextreme-angular/src/ui/drop-down-box/index.ts
+++ b/packages/devextreme-angular/src/ui/drop-down-box/index.ts
@@ -174,10 +174,10 @@ export class DxDropDownBoxComponent extends DxComponent implements OnDestroy, Co
     
      */
     @Input()
-    get buttons(): Array<DropDownPredefinedButton | TextEditorButton> {
+    get buttons(): Array<DropDownPredefinedButton | TextEditorButton> | undefined {
         return this._getOption('buttons');
     }
-    set buttons(value: Array<DropDownPredefinedButton | TextEditorButton>) {
+    set buttons(value: Array<DropDownPredefinedButton | TextEditorButton> | undefined) {
         this._setOption('buttons', value);
     }
 
@@ -462,10 +462,10 @@ export class DxDropDownBoxComponent extends DxComponent implements OnDestroy, Co
     
      */
     @Input()
-    get maxLength(): number | string {
+    get maxLength(): null | number | string {
         return this._getOption('maxLength');
     }
-    set maxLength(value: number | string) {
+    set maxLength(value: null | number | string) {
         this._setOption('maxLength', value);
     }
 
@@ -618,10 +618,10 @@ export class DxDropDownBoxComponent extends DxComponent implements OnDestroy, Co
     
      */
     @Input()
-    get validationError(): any {
+    get validationError(): any | null {
         return this._getOption('validationError');
     }
-    set validationError(value: any) {
+    set validationError(value: any | null) {
         this._setOption('validationError', value);
     }
 
@@ -631,10 +631,10 @@ export class DxDropDownBoxComponent extends DxComponent implements OnDestroy, Co
     
      */
     @Input()
-    get validationErrors(): Array<any> {
+    get validationErrors(): Array<any> | null {
         return this._getOption('validationErrors');
     }
-    set validationErrors(value: Array<any>) {
+    set validationErrors(value: Array<any> | null) {
         this._setOption('validationErrors', value);
     }
 
@@ -683,10 +683,10 @@ export class DxDropDownBoxComponent extends DxComponent implements OnDestroy, Co
     
      */
     @Input()
-    get value(): any {
+    get value(): any | null {
         return this._getOption('value');
     }
-    set value(value: any) {
+    set value(value: any | null) {
         this._setOption('value', value);
     }
 
@@ -896,7 +896,7 @@ export class DxDropDownBoxComponent extends DxComponent implements OnDestroy, Co
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() buttonsChange: EventEmitter<Array<DropDownPredefinedButton | TextEditorButton>>;
+    @Output() buttonsChange: EventEmitter<Array<DropDownPredefinedButton | TextEditorButton> | undefined>;
 
     /**
     
@@ -1050,7 +1050,7 @@ export class DxDropDownBoxComponent extends DxComponent implements OnDestroy, Co
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() maxLengthChange: EventEmitter<number | string>;
+    @Output() maxLengthChange: EventEmitter<null | number | string>;
 
     /**
     
@@ -1134,14 +1134,14 @@ export class DxDropDownBoxComponent extends DxComponent implements OnDestroy, Co
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorChange: EventEmitter<any>;
+    @Output() validationErrorChange: EventEmitter<any | null>;
 
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorsChange: EventEmitter<Array<any>>;
+    @Output() validationErrorsChange: EventEmitter<Array<any> | null>;
 
     /**
     
@@ -1169,7 +1169,7 @@ export class DxDropDownBoxComponent extends DxComponent implements OnDestroy, Co
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() valueChange: EventEmitter<any>;
+    @Output() valueChange: EventEmitter<any | null>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/drop-down-box/nested/drop-down-options.ts b/packages/devextreme-angular/src/ui/drop-down-box/nested/drop-down-options.ts
index 72889a5c3b39..a4140ed75beb 100644
--- a/packages/devextreme-angular/src/ui/drop-down-box/nested/drop-down-options.ts
+++ b/packages/devextreme-angular/src/ui/drop-down-box/nested/drop-down-options.ts
@@ -220,18 +220,18 @@ export class DxoDropDownBoxDropDownOptionsComponent extends NestedOption impleme
     }
 
     @Input()
-    get onContentReady(): ((e: EventInfo<any>) => void) {
+    get onContentReady(): ((e: EventInfo<any>) => void) | undefined {
         return this._getOption('onContentReady');
     }
-    set onContentReady(value: ((e: EventInfo<any>) => void)) {
+    set onContentReady(value: ((e: EventInfo<any>) => void) | undefined) {
         this._setOption('onContentReady', value);
     }
 
     @Input()
-    get onDisposing(): ((e: EventInfo<any>) => void) {
+    get onDisposing(): ((e: EventInfo<any>) => void) | undefined {
         return this._getOption('onDisposing');
     }
-    set onDisposing(value: ((e: EventInfo<any>) => void)) {
+    set onDisposing(value: ((e: EventInfo<any>) => void) | undefined) {
         this._setOption('onDisposing', value);
     }
 
@@ -252,42 +252,42 @@ export class DxoDropDownBoxDropDownOptionsComponent extends NestedOption impleme
     }
 
     @Input()
-    get onInitialized(): ((e: { component: CoreComponent<any>, element: any }) => void) {
+    get onInitialized(): ((e: { component: CoreComponent<any>, element: any }) => void) | undefined {
         return this._getOption('onInitialized');
     }
-    set onInitialized(value: ((e: { component: CoreComponent<any>, element: any }) => void)) {
+    set onInitialized(value: ((e: { component: CoreComponent<any>, element: any }) => void) | undefined) {
         this._setOption('onInitialized', value);
     }
 
     @Input()
-    get onOptionChanged(): ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) {
+    get onOptionChanged(): ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) | undefined {
         return this._getOption('onOptionChanged');
     }
-    set onOptionChanged(value: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void)) {
+    set onOptionChanged(value: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) | undefined) {
         this._setOption('onOptionChanged', value);
     }
 
     @Input()
-    get onResize(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) {
+    get onResize(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined {
         return this._getOption('onResize');
     }
-    set onResize(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)) {
+    set onResize(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined) {
         this._setOption('onResize', value);
     }
 
     @Input()
-    get onResizeEnd(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) {
+    get onResizeEnd(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined {
         return this._getOption('onResizeEnd');
     }
-    set onResizeEnd(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)) {
+    set onResizeEnd(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined) {
         this._setOption('onResizeEnd', value);
     }
 
     @Input()
-    get onResizeStart(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) {
+    get onResizeStart(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined {
         return this._getOption('onResizeStart');
     }
-    set onResizeStart(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)) {
+    set onResizeStart(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined) {
         this._setOption('onResizeStart', value);
     }
 
@@ -308,10 +308,10 @@ export class DxoDropDownBoxDropDownOptionsComponent extends NestedOption impleme
     }
 
     @Input()
-    get onTitleRendered(): ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) {
+    get onTitleRendered(): ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) | undefined {
         return this._getOption('onTitleRendered');
     }
-    set onTitleRendered(value: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void)) {
+    set onTitleRendered(value: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) | undefined) {
         this._setOption('onTitleRendered', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/drop-down-box/nested/options.ts b/packages/devextreme-angular/src/ui/drop-down-box/nested/options.ts
index 52da86650fd1..c19e6c269c68 100644
--- a/packages/devextreme-angular/src/ui/drop-down-box/nested/options.ts
+++ b/packages/devextreme-angular/src/ui/drop-down-box/nested/options.ts
@@ -114,10 +114,10 @@ export class DxoDropDownBoxOptionsComponent extends NestedOption implements Afte
     }
 
     @Input()
-    get onClick(): ((e: ClickEvent) => void) {
+    get onClick(): ((e: ClickEvent) => void) | undefined {
         return this._getOption('onClick');
     }
-    set onClick(value: ((e: ClickEvent) => void)) {
+    set onClick(value: ((e: ClickEvent) => void) | undefined) {
         this._setOption('onClick', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/drop-down-button/nested/drop-down-options.ts b/packages/devextreme-angular/src/ui/drop-down-button/nested/drop-down-options.ts
index 850bb97168fc..9a9ed959eb1d 100644
--- a/packages/devextreme-angular/src/ui/drop-down-button/nested/drop-down-options.ts
+++ b/packages/devextreme-angular/src/ui/drop-down-button/nested/drop-down-options.ts
@@ -220,18 +220,18 @@ export class DxoDropDownButtonDropDownOptionsComponent extends NestedOption impl
     }
 
     @Input()
-    get onContentReady(): ((e: EventInfo<any>) => void) {
+    get onContentReady(): ((e: EventInfo<any>) => void) | undefined {
         return this._getOption('onContentReady');
     }
-    set onContentReady(value: ((e: EventInfo<any>) => void)) {
+    set onContentReady(value: ((e: EventInfo<any>) => void) | undefined) {
         this._setOption('onContentReady', value);
     }
 
     @Input()
-    get onDisposing(): ((e: EventInfo<any>) => void) {
+    get onDisposing(): ((e: EventInfo<any>) => void) | undefined {
         return this._getOption('onDisposing');
     }
-    set onDisposing(value: ((e: EventInfo<any>) => void)) {
+    set onDisposing(value: ((e: EventInfo<any>) => void) | undefined) {
         this._setOption('onDisposing', value);
     }
 
@@ -252,42 +252,42 @@ export class DxoDropDownButtonDropDownOptionsComponent extends NestedOption impl
     }
 
     @Input()
-    get onInitialized(): ((e: { component: CoreComponent<any>, element: any }) => void) {
+    get onInitialized(): ((e: { component: CoreComponent<any>, element: any }) => void) | undefined {
         return this._getOption('onInitialized');
     }
-    set onInitialized(value: ((e: { component: CoreComponent<any>, element: any }) => void)) {
+    set onInitialized(value: ((e: { component: CoreComponent<any>, element: any }) => void) | undefined) {
         this._setOption('onInitialized', value);
     }
 
     @Input()
-    get onOptionChanged(): ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) {
+    get onOptionChanged(): ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) | undefined {
         return this._getOption('onOptionChanged');
     }
-    set onOptionChanged(value: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void)) {
+    set onOptionChanged(value: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) | undefined) {
         this._setOption('onOptionChanged', value);
     }
 
     @Input()
-    get onResize(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) {
+    get onResize(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined {
         return this._getOption('onResize');
     }
-    set onResize(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)) {
+    set onResize(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined) {
         this._setOption('onResize', value);
     }
 
     @Input()
-    get onResizeEnd(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) {
+    get onResizeEnd(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined {
         return this._getOption('onResizeEnd');
     }
-    set onResizeEnd(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)) {
+    set onResizeEnd(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined) {
         this._setOption('onResizeEnd', value);
     }
 
     @Input()
-    get onResizeStart(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) {
+    get onResizeStart(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined {
         return this._getOption('onResizeStart');
     }
-    set onResizeStart(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)) {
+    set onResizeStart(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined) {
         this._setOption('onResizeStart', value);
     }
 
@@ -308,10 +308,10 @@ export class DxoDropDownButtonDropDownOptionsComponent extends NestedOption impl
     }
 
     @Input()
-    get onTitleRendered(): ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) {
+    get onTitleRendered(): ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) | undefined {
         return this._getOption('onTitleRendered');
     }
-    set onTitleRendered(value: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void)) {
+    set onTitleRendered(value: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) | undefined) {
         this._setOption('onTitleRendered', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/file-manager/index.ts b/packages/devextreme-angular/src/ui/file-manager/index.ts
index 5528e65e6e26..3ed327b070b3 100644
--- a/packages/devextreme-angular/src/ui/file-manager/index.ts
+++ b/packages/devextreme-angular/src/ui/file-manager/index.ts
@@ -240,10 +240,10 @@ export class DxFileManagerComponent extends DxComponent implements OnDestroy, On
     
      */
     @Input()
-    get fileSystemProvider(): any {
+    get fileSystemProvider(): any | null {
         return this._getOption('fileSystemProvider');
     }
-    set fileSystemProvider(value: any) {
+    set fileSystemProvider(value: any | null) {
         this._setOption('fileSystemProvider', value);
     }
 
@@ -253,10 +253,10 @@ export class DxFileManagerComponent extends DxComponent implements OnDestroy, On
     
      */
     @Input()
-    get focusedItemKey(): string {
+    get focusedItemKey(): string | undefined {
         return this._getOption('focusedItemKey');
     }
-    set focusedItemKey(value: string) {
+    set focusedItemKey(value: string | undefined) {
         this._setOption('focusedItemKey', value);
     }
 
@@ -743,14 +743,14 @@ export class DxFileManagerComponent extends DxComponent implements OnDestroy, On
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() fileSystemProviderChange: EventEmitter<any>;
+    @Output() fileSystemProviderChange: EventEmitter<any | null>;
 
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() focusedItemKeyChange: EventEmitter<string>;
+    @Output() focusedItemKeyChange: EventEmitter<string | undefined>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/file-uploader/index.ts b/packages/devextreme-angular/src/ui/file-uploader/index.ts
index b2f713903a90..05c38cfa21e1 100644
--- a/packages/devextreme-angular/src/ui/file-uploader/index.ts
+++ b/packages/devextreme-angular/src/ui/file-uploader/index.ts
@@ -650,10 +650,10 @@ export class DxFileUploaderComponent extends DxComponent implements OnDestroy, C
     
      */
     @Input()
-    get validationError(): any {
+    get validationError(): any | null {
         return this._getOption('validationError');
     }
-    set validationError(value: any) {
+    set validationError(value: any | null) {
         this._setOption('validationError', value);
     }
 
@@ -663,10 +663,10 @@ export class DxFileUploaderComponent extends DxComponent implements OnDestroy, C
     
      */
     @Input()
-    get validationErrors(): Array<any> {
+    get validationErrors(): Array<any> | null {
         return this._getOption('validationErrors');
     }
-    set validationErrors(value: Array<any>) {
+    set validationErrors(value: Array<any> | null) {
         this._setOption('validationErrors', value);
     }
 
@@ -1147,14 +1147,14 @@ export class DxFileUploaderComponent extends DxComponent implements OnDestroy, C
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorChange: EventEmitter<any>;
+    @Output() validationErrorChange: EventEmitter<any | null>;
 
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorsChange: EventEmitter<Array<any>>;
+    @Output() validationErrorsChange: EventEmitter<Array<any> | null>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/form/nested/button-options.ts b/packages/devextreme-angular/src/ui/form/nested/button-options.ts
index 8863169911bf..4c370cfa7542 100644
--- a/packages/devextreme-angular/src/ui/form/nested/button-options.ts
+++ b/packages/devextreme-angular/src/ui/form/nested/button-options.ts
@@ -114,10 +114,10 @@ export class DxoFormButtonOptionsComponent extends NestedOption implements After
     }
 
     @Input()
-    get onClick(): ((e: ClickEvent) => void) {
+    get onClick(): ((e: ClickEvent) => void) | undefined {
         return this._getOption('onClick');
     }
-    set onClick(value: ((e: ClickEvent) => void)) {
+    set onClick(value: ((e: ClickEvent) => void) | undefined) {
         this._setOption('onClick', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/form/nested/tab-panel-options.ts b/packages/devextreme-angular/src/ui/form/nested/tab-panel-options.ts
index 2524037aebe1..512f929bb3bb 100644
--- a/packages/devextreme-angular/src/ui/form/nested/tab-panel-options.ts
+++ b/packages/devextreme-angular/src/ui/form/nested/tab-panel-options.ts
@@ -288,18 +288,18 @@ export class DxoFormTabPanelOptionsComponent extends NestedOption implements OnD
     }
 
     @Input()
-    get onTitleHold(): ((e: TitleHoldEvent) => void) {
+    get onTitleHold(): ((e: TitleHoldEvent) => void) | undefined {
         return this._getOption('onTitleHold');
     }
-    set onTitleHold(value: ((e: TitleHoldEvent) => void)) {
+    set onTitleHold(value: ((e: TitleHoldEvent) => void) | undefined) {
         this._setOption('onTitleHold', value);
     }
 
     @Input()
-    get onTitleRendered(): ((e: TitleRenderedEvent) => void) {
+    get onTitleRendered(): ((e: TitleRenderedEvent) => void) | undefined {
         return this._getOption('onTitleRendered');
     }
-    set onTitleRendered(value: ((e: TitleRenderedEvent) => void)) {
+    set onTitleRendered(value: ((e: TitleRenderedEvent) => void) | undefined) {
         this._setOption('onTitleRendered', value);
     }
 
@@ -344,10 +344,10 @@ export class DxoFormTabPanelOptionsComponent extends NestedOption implements OnD
     }
 
     @Input()
-    get selectedItem(): any {
+    get selectedItem(): any | null {
         return this._getOption('selectedItem');
     }
-    set selectedItem(value: any) {
+    set selectedItem(value: any | null) {
         this._setOption('selectedItem', value);
     }
 
@@ -427,7 +427,7 @@ export class DxoFormTabPanelOptionsComponent extends NestedOption implements OnD
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() selectedItemChange: EventEmitter<any>;
+    @Output() selectedItemChange: EventEmitter<any | null>;
     protected get _optionPath() {
         return 'tabPanelOptions';
     }
diff --git a/packages/devextreme-angular/src/ui/funnel/index.ts b/packages/devextreme-angular/src/ui/funnel/index.ts
index dd78f199c453..7d4c1ea18db1 100644
--- a/packages/devextreme-angular/src/ui/funnel/index.ts
+++ b/packages/devextreme-angular/src/ui/funnel/index.ts
@@ -271,10 +271,10 @@ export class DxFunnelComponent extends DxComponent implements OnDestroy, OnChang
     
      */
     @Input()
-    get legend(): { backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((itemInfo: { item: dxFunnelItem, text: string }) => string), customizeItems?: ((items: Array<FunnelLegendItem>) => Array<FunnelLegendItem>), customizeText?: ((itemInfo: { item: dxFunnelItem, text: string }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, itemsAlignment?: HorizontalAlignment | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, rowCount?: number, rowItemSpacing?: number, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean } {
+    get legend(): { backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((itemInfo: { item: dxFunnelItem, text: string }) => string), customizeItems?: ((items: Array<FunnelLegendItem>) => Array<FunnelLegendItem>), customizeText?: ((itemInfo: { item: dxFunnelItem, text: string }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, itemsAlignment?: HorizontalAlignment | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, rowCount?: number, rowItemSpacing?: number, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined }, text?: string | undefined, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean } {
         return this._getOption('legend');
     }
-    set legend(value: { backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((itemInfo: { item: dxFunnelItem, text: string }) => string), customizeItems?: ((items: Array<FunnelLegendItem>) => Array<FunnelLegendItem>), customizeText?: ((itemInfo: { item: dxFunnelItem, text: string }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, itemsAlignment?: HorizontalAlignment | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, rowCount?: number, rowItemSpacing?: number, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean }) {
+    set legend(value: { backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((itemInfo: { item: dxFunnelItem, text: string }) => string), customizeItems?: ((items: Array<FunnelLegendItem>) => Array<FunnelLegendItem>), customizeText?: ((itemInfo: { item: dxFunnelItem, text: string }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, itemsAlignment?: HorizontalAlignment | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, rowCount?: number, rowItemSpacing?: number, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined }, text?: string | undefined, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean }) {
         this._setOption('legend', value);
     }
 
@@ -466,10 +466,10 @@ export class DxFunnelComponent extends DxComponent implements OnDestroy, OnChang
     
      */
     @Input()
-    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap } {
+    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string | undefined, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap } {
         return this._getOption('title');
     }
-    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }) {
+    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string | undefined, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }) {
         this._setOption('title', value);
     }
 
@@ -684,7 +684,7 @@ export class DxFunnelComponent extends DxComponent implements OnDestroy, OnChang
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() legendChange: EventEmitter<{ backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((itemInfo: { item: dxFunnelItem, text: string }) => string), customizeItems?: ((items: Array<FunnelLegendItem>) => Array<FunnelLegendItem>), customizeText?: ((itemInfo: { item: dxFunnelItem, text: string }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, itemsAlignment?: HorizontalAlignment | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, rowCount?: number, rowItemSpacing?: number, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean }>;
+    @Output() legendChange: EventEmitter<{ backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((itemInfo: { item: dxFunnelItem, text: string }) => string), customizeItems?: ((items: Array<FunnelLegendItem>) => Array<FunnelLegendItem>), customizeText?: ((itemInfo: { item: dxFunnelItem, text: string }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, itemsAlignment?: HorizontalAlignment | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, rowCount?: number, rowItemSpacing?: number, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined }, text?: string | undefined, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean }>;
 
     /**
     
@@ -789,7 +789,7 @@ export class DxFunnelComponent extends DxComponent implements OnDestroy, OnChang
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() titleChange: EventEmitter<string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }>;
+    @Output() titleChange: EventEmitter<string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string | undefined, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/funnel/nested/funnel-title-subtitle.ts b/packages/devextreme-angular/src/ui/funnel/nested/funnel-title-subtitle.ts
index a2ebd4ec7e19..090335bf71c8 100644
--- a/packages/devextreme-angular/src/ui/funnel/nested/funnel-title-subtitle.ts
+++ b/packages/devextreme-angular/src/ui/funnel/nested/funnel-title-subtitle.ts
@@ -48,10 +48,10 @@ export class DxoFunnelFunnelTitleSubtitleComponent extends NestedOption implemen
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/funnel/nested/funnel-title.ts b/packages/devextreme-angular/src/ui/funnel/nested/funnel-title.ts
index 03d348104d34..bf11c09a042c 100644
--- a/packages/devextreme-angular/src/ui/funnel/nested/funnel-title.ts
+++ b/packages/devextreme-angular/src/ui/funnel/nested/funnel-title.ts
@@ -65,18 +65,18 @@ export class DxoFunnelFunnelTitleComponent extends NestedOption implements OnDes
     }
 
     @Input()
-    get subtitle(): string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap } {
+    get subtitle(): string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap } {
         return this._getOption('subtitle');
     }
-    set subtitle(value: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }) {
+    set subtitle(value: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }) {
         this._setOption('subtitle', value);
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/funnel/nested/legend-title-subtitle.ts b/packages/devextreme-angular/src/ui/funnel/nested/legend-title-subtitle.ts
index eac7e264f26c..ae28ebd34ad5 100644
--- a/packages/devextreme-angular/src/ui/funnel/nested/legend-title-subtitle.ts
+++ b/packages/devextreme-angular/src/ui/funnel/nested/legend-title-subtitle.ts
@@ -48,10 +48,10 @@ export class DxoFunnelLegendTitleSubtitleComponent extends NestedOption implemen
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/funnel/nested/legend-title.ts b/packages/devextreme-angular/src/ui/funnel/nested/legend-title.ts
index d0dc974c1469..47d34c6d6605 100644
--- a/packages/devextreme-angular/src/ui/funnel/nested/legend-title.ts
+++ b/packages/devextreme-angular/src/ui/funnel/nested/legend-title.ts
@@ -65,18 +65,18 @@ export class DxoFunnelLegendTitleComponent extends NestedOption implements OnDes
     }
 
     @Input()
-    get subtitle(): string | { font?: Font, offset?: number, text?: string } {
+    get subtitle(): string | { font?: Font, offset?: number, text?: string | undefined } {
         return this._getOption('subtitle');
     }
-    set subtitle(value: string | { font?: Font, offset?: number, text?: string }) {
+    set subtitle(value: string | { font?: Font, offset?: number, text?: string | undefined }) {
         this._setOption('subtitle', value);
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/funnel/nested/legend.ts b/packages/devextreme-angular/src/ui/funnel/nested/legend.ts
index 7f94b0316743..261fcaa9b627 100644
--- a/packages/devextreme-angular/src/ui/funnel/nested/legend.ts
+++ b/packages/devextreme-angular/src/ui/funnel/nested/legend.ts
@@ -186,10 +186,10 @@ export class DxoFunnelLegendComponent extends NestedOption implements OnDestroy,
     }
 
     @Input()
-    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge } {
+    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined }, text?: string | undefined, verticalAlignment?: VerticalEdge } {
         return this._getOption('title');
     }
-    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge }) {
+    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined }, text?: string | undefined, verticalAlignment?: VerticalEdge }) {
         this._setOption('title', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/funnel/nested/subtitle.ts b/packages/devextreme-angular/src/ui/funnel/nested/subtitle.ts
index 660ad0161211..ac082210c99b 100644
--- a/packages/devextreme-angular/src/ui/funnel/nested/subtitle.ts
+++ b/packages/devextreme-angular/src/ui/funnel/nested/subtitle.ts
@@ -48,10 +48,10 @@ export class DxoFunnelSubtitleComponent extends NestedOption implements OnDestro
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/funnel/nested/title.ts b/packages/devextreme-angular/src/ui/funnel/nested/title.ts
index 733205ab5a1a..02d1bbf06672 100644
--- a/packages/devextreme-angular/src/ui/funnel/nested/title.ts
+++ b/packages/devextreme-angular/src/ui/funnel/nested/title.ts
@@ -65,18 +65,18 @@ export class DxoFunnelTitleComponent extends NestedOption implements OnDestroy,
     }
 
     @Input()
-    get subtitle(): string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap } {
+    get subtitle(): string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap } {
         return this._getOption('subtitle');
     }
-    set subtitle(value: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }) {
+    set subtitle(value: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }) {
         this._setOption('subtitle', value);
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/gallery/index.ts b/packages/devextreme-angular/src/ui/gallery/index.ts
index d42063b54872..b58e6778803a 100644
--- a/packages/devextreme-angular/src/ui/gallery/index.ts
+++ b/packages/devextreme-angular/src/ui/gallery/index.ts
@@ -326,10 +326,10 @@ export class DxGalleryComponent<TItem = any, TKey = any> extends DxComponent imp
     
      */
     @Input()
-    get selectedItem(): any {
+    get selectedItem(): any | null {
         return this._getOption('selectedItem');
     }
-    set selectedItem(value: any) {
+    set selectedItem(value: any | null) {
         this._setOption('selectedItem', value);
     }
 
@@ -660,7 +660,7 @@ export class DxGalleryComponent<TItem = any, TKey = any> extends DxComponent imp
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() selectedItemChange: EventEmitter<any>;
+    @Output() selectedItemChange: EventEmitter<any | null>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/gantt/index.ts b/packages/devextreme-angular/src/ui/gantt/index.ts
index 57a0edb4cda1..e58fbf7fdb3a 100644
--- a/packages/devextreme-angular/src/ui/gantt/index.ts
+++ b/packages/devextreme-angular/src/ui/gantt/index.ts
@@ -251,10 +251,10 @@ export class DxGanttComponent extends DxComponent implements OnDestroy, OnChange
     
      */
     @Input()
-    get endDateRange(): Date {
+    get endDateRange(): Date | undefined {
         return this._getOption('endDateRange');
     }
-    set endDateRange(value: Date) {
+    set endDateRange(value: Date | undefined) {
         this._setOption('endDateRange', value);
     }
 
@@ -485,10 +485,10 @@ export class DxGanttComponent extends DxComponent implements OnDestroy, OnChange
     
      */
     @Input()
-    get startDateRange(): Date {
+    get startDateRange(): Date | undefined {
         return this._getOption('startDateRange');
     }
-    set startDateRange(value: Date) {
+    set startDateRange(value: Date | undefined) {
         this._setOption('startDateRange', value);
     }
 
@@ -977,7 +977,7 @@ export class DxGanttComponent extends DxComponent implements OnDestroy, OnChange
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() endDateRangeChange: EventEmitter<Date>;
+    @Output() endDateRangeChange: EventEmitter<Date | undefined>;
 
     /**
     
@@ -1103,7 +1103,7 @@ export class DxGanttComponent extends DxComponent implements OnDestroy, OnChange
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() startDateRangeChange: EventEmitter<Date>;
+    @Output() startDateRangeChange: EventEmitter<Date | undefined>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/html-editor/index.ts b/packages/devextreme-angular/src/ui/html-editor/index.ts
index 9efc625b206e..e7998f26019e 100644
--- a/packages/devextreme-angular/src/ui/html-editor/index.ts
+++ b/packages/devextreme-angular/src/ui/html-editor/index.ts
@@ -328,10 +328,10 @@ export class DxHtmlEditorComponent extends DxComponent implements OnDestroy, Con
     
      */
     @Input()
-    get mediaResizing(): dxHtmlEditorMediaResizing {
+    get mediaResizing(): dxHtmlEditorMediaResizing | null {
         return this._getOption('mediaResizing');
     }
-    set mediaResizing(value: dxHtmlEditorMediaResizing) {
+    set mediaResizing(value: dxHtmlEditorMediaResizing | null) {
         this._setOption('mediaResizing', value);
     }
 
@@ -341,10 +341,10 @@ export class DxHtmlEditorComponent extends DxComponent implements OnDestroy, Con
     
      */
     @Input()
-    get mentions(): Array<dxHtmlEditorMention> {
+    get mentions(): Array<dxHtmlEditorMention> | null {
         return this._getOption('mentions');
     }
-    set mentions(value: Array<dxHtmlEditorMention>) {
+    set mentions(value: Array<dxHtmlEditorMention> | null) {
         this._setOption('mentions', value);
     }
 
@@ -432,10 +432,10 @@ export class DxHtmlEditorComponent extends DxComponent implements OnDestroy, Con
     
      */
     @Input()
-    get tableContextMenu(): dxHtmlEditorTableContextMenu {
+    get tableContextMenu(): dxHtmlEditorTableContextMenu | null {
         return this._getOption('tableContextMenu');
     }
-    set tableContextMenu(value: dxHtmlEditorTableContextMenu) {
+    set tableContextMenu(value: dxHtmlEditorTableContextMenu | null) {
         this._setOption('tableContextMenu', value);
     }
 
@@ -445,10 +445,10 @@ export class DxHtmlEditorComponent extends DxComponent implements OnDestroy, Con
     
      */
     @Input()
-    get tableResizing(): dxHtmlEditorTableResizing {
+    get tableResizing(): dxHtmlEditorTableResizing | null {
         return this._getOption('tableResizing');
     }
-    set tableResizing(value: dxHtmlEditorTableResizing) {
+    set tableResizing(value: dxHtmlEditorTableResizing | null) {
         this._setOption('tableResizing', value);
     }
 
@@ -458,10 +458,10 @@ export class DxHtmlEditorComponent extends DxComponent implements OnDestroy, Con
     
      */
     @Input()
-    get toolbar(): dxHtmlEditorToolbar {
+    get toolbar(): dxHtmlEditorToolbar | null {
         return this._getOption('toolbar');
     }
-    set toolbar(value: dxHtmlEditorToolbar) {
+    set toolbar(value: dxHtmlEditorToolbar | null) {
         this._setOption('toolbar', value);
     }
 
@@ -471,10 +471,10 @@ export class DxHtmlEditorComponent extends DxComponent implements OnDestroy, Con
     
      */
     @Input()
-    get validationError(): any {
+    get validationError(): any | null {
         return this._getOption('validationError');
     }
-    set validationError(value: any) {
+    set validationError(value: any | null) {
         this._setOption('validationError', value);
     }
 
@@ -484,10 +484,10 @@ export class DxHtmlEditorComponent extends DxComponent implements OnDestroy, Con
     
      */
     @Input()
-    get validationErrors(): Array<any> {
+    get validationErrors(): Array<any> | null {
         return this._getOption('validationErrors');
     }
-    set validationErrors(value: Array<any>) {
+    set validationErrors(value: Array<any> | null) {
         this._setOption('validationErrors', value);
     }
 
@@ -536,10 +536,10 @@ export class DxHtmlEditorComponent extends DxComponent implements OnDestroy, Con
     
      */
     @Input()
-    get value(): any {
+    get value(): any | null {
         return this._getOption('value');
     }
-    set value(value: any) {
+    set value(value: any | null) {
         this._setOption('value', value);
     }
 
@@ -549,10 +549,10 @@ export class DxHtmlEditorComponent extends DxComponent implements OnDestroy, Con
     
      */
     @Input()
-    get variables(): dxHtmlEditorVariables {
+    get variables(): dxHtmlEditorVariables | null {
         return this._getOption('variables');
     }
-    set variables(value: dxHtmlEditorVariables) {
+    set variables(value: dxHtmlEditorVariables | null) {
         this._setOption('variables', value);
     }
 
@@ -748,14 +748,14 @@ export class DxHtmlEditorComponent extends DxComponent implements OnDestroy, Con
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() mediaResizingChange: EventEmitter<dxHtmlEditorMediaResizing>;
+    @Output() mediaResizingChange: EventEmitter<dxHtmlEditorMediaResizing | null>;
 
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() mentionsChange: EventEmitter<Array<dxHtmlEditorMention>>;
+    @Output() mentionsChange: EventEmitter<Array<dxHtmlEditorMention> | null>;
 
     /**
     
@@ -804,35 +804,35 @@ export class DxHtmlEditorComponent extends DxComponent implements OnDestroy, Con
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() tableContextMenuChange: EventEmitter<dxHtmlEditorTableContextMenu>;
+    @Output() tableContextMenuChange: EventEmitter<dxHtmlEditorTableContextMenu | null>;
 
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() tableResizingChange: EventEmitter<dxHtmlEditorTableResizing>;
+    @Output() tableResizingChange: EventEmitter<dxHtmlEditorTableResizing | null>;
 
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() toolbarChange: EventEmitter<dxHtmlEditorToolbar>;
+    @Output() toolbarChange: EventEmitter<dxHtmlEditorToolbar | null>;
 
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorChange: EventEmitter<any>;
+    @Output() validationErrorChange: EventEmitter<any | null>;
 
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorsChange: EventEmitter<Array<any>>;
+    @Output() validationErrorsChange: EventEmitter<Array<any> | null>;
 
     /**
     
@@ -860,14 +860,14 @@ export class DxHtmlEditorComponent extends DxComponent implements OnDestroy, Con
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() valueChange: EventEmitter<any>;
+    @Output() valueChange: EventEmitter<any | null>;
 
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() variablesChange: EventEmitter<dxHtmlEditorVariables>;
+    @Output() variablesChange: EventEmitter<dxHtmlEditorVariables | null>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/html-editor/nested/file-uploader-options.ts b/packages/devextreme-angular/src/ui/html-editor/nested/file-uploader-options.ts
index 89c7934bf9c9..e1414cd4c297 100644
--- a/packages/devextreme-angular/src/ui/html-editor/nested/file-uploader-options.ts
+++ b/packages/devextreme-angular/src/ui/html-editor/nested/file-uploader-options.ts
@@ -244,10 +244,10 @@ export class DxoHtmlEditorFileUploaderOptionsComponent extends NestedOption impl
     }
 
     @Input()
-    get onBeforeSend(): ((e: BeforeSendEvent) => void) {
+    get onBeforeSend(): ((e: BeforeSendEvent) => void) | undefined {
         return this._getOption('onBeforeSend');
     }
-    set onBeforeSend(value: ((e: BeforeSendEvent) => void)) {
+    set onBeforeSend(value: ((e: BeforeSendEvent) => void) | undefined) {
         this._setOption('onBeforeSend', value);
     }
 
@@ -268,26 +268,26 @@ export class DxoHtmlEditorFileUploaderOptionsComponent extends NestedOption impl
     }
 
     @Input()
-    get onDropZoneEnter(): ((e: DropZoneEnterEvent) => void) {
+    get onDropZoneEnter(): ((e: DropZoneEnterEvent) => void) | undefined {
         return this._getOption('onDropZoneEnter');
     }
-    set onDropZoneEnter(value: ((e: DropZoneEnterEvent) => void)) {
+    set onDropZoneEnter(value: ((e: DropZoneEnterEvent) => void) | undefined) {
         this._setOption('onDropZoneEnter', value);
     }
 
     @Input()
-    get onDropZoneLeave(): ((e: DropZoneLeaveEvent) => void) {
+    get onDropZoneLeave(): ((e: DropZoneLeaveEvent) => void) | undefined {
         return this._getOption('onDropZoneLeave');
     }
-    set onDropZoneLeave(value: ((e: DropZoneLeaveEvent) => void)) {
+    set onDropZoneLeave(value: ((e: DropZoneLeaveEvent) => void) | undefined) {
         this._setOption('onDropZoneLeave', value);
     }
 
     @Input()
-    get onFilesUploaded(): ((e: FilesUploadedEvent) => void) {
+    get onFilesUploaded(): ((e: FilesUploadedEvent) => void) | undefined {
         return this._getOption('onFilesUploaded');
     }
-    set onFilesUploaded(value: ((e: FilesUploadedEvent) => void)) {
+    set onFilesUploaded(value: ((e: FilesUploadedEvent) => void) | undefined) {
         this._setOption('onFilesUploaded', value);
     }
 
@@ -308,50 +308,50 @@ export class DxoHtmlEditorFileUploaderOptionsComponent extends NestedOption impl
     }
 
     @Input()
-    get onProgress(): ((e: ProgressEvent) => void) {
+    get onProgress(): ((e: ProgressEvent) => void) | undefined {
         return this._getOption('onProgress');
     }
-    set onProgress(value: ((e: ProgressEvent) => void)) {
+    set onProgress(value: ((e: ProgressEvent) => void) | undefined) {
         this._setOption('onProgress', value);
     }
 
     @Input()
-    get onUploadAborted(): ((e: UploadAbortedEvent) => void) {
+    get onUploadAborted(): ((e: UploadAbortedEvent) => void) | undefined {
         return this._getOption('onUploadAborted');
     }
-    set onUploadAborted(value: ((e: UploadAbortedEvent) => void)) {
+    set onUploadAborted(value: ((e: UploadAbortedEvent) => void) | undefined) {
         this._setOption('onUploadAborted', value);
     }
 
     @Input()
-    get onUploaded(): ((e: UploadedEvent) => void) {
+    get onUploaded(): ((e: UploadedEvent) => void) | undefined {
         return this._getOption('onUploaded');
     }
-    set onUploaded(value: ((e: UploadedEvent) => void)) {
+    set onUploaded(value: ((e: UploadedEvent) => void) | undefined) {
         this._setOption('onUploaded', value);
     }
 
     @Input()
-    get onUploadError(): ((e: UploadErrorEvent) => void) {
+    get onUploadError(): ((e: UploadErrorEvent) => void) | undefined {
         return this._getOption('onUploadError');
     }
-    set onUploadError(value: ((e: UploadErrorEvent) => void)) {
+    set onUploadError(value: ((e: UploadErrorEvent) => void) | undefined) {
         this._setOption('onUploadError', value);
     }
 
     @Input()
-    get onUploadStarted(): ((e: UploadStartedEvent) => void) {
+    get onUploadStarted(): ((e: UploadStartedEvent) => void) | undefined {
         return this._getOption('onUploadStarted');
     }
-    set onUploadStarted(value: ((e: UploadStartedEvent) => void)) {
+    set onUploadStarted(value: ((e: UploadStartedEvent) => void) | undefined) {
         this._setOption('onUploadStarted', value);
     }
 
     @Input()
-    get onValueChanged(): ((e: ValueChangedEvent) => void) {
+    get onValueChanged(): ((e: ValueChangedEvent) => void) | undefined {
         return this._getOption('onValueChanged');
     }
-    set onValueChanged(value: ((e: ValueChangedEvent) => void)) {
+    set onValueChanged(value: ((e: ValueChangedEvent) => void) | undefined) {
         this._setOption('onValueChanged', value);
     }
 
@@ -500,18 +500,18 @@ export class DxoHtmlEditorFileUploaderOptionsComponent extends NestedOption impl
     }
 
     @Input()
-    get validationError(): any {
+    get validationError(): any | null {
         return this._getOption('validationError');
     }
-    set validationError(value: any) {
+    set validationError(value: any | null) {
         this._setOption('validationError', value);
     }
 
     @Input()
-    get validationErrors(): Array<any> {
+    get validationErrors(): Array<any> | null {
         return this._getOption('validationErrors');
     }
-    set validationErrors(value: Array<any>) {
+    set validationErrors(value: Array<any> | null) {
         this._setOption('validationErrors', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/linear-gauge/index.ts b/packages/devextreme-angular/src/ui/linear-gauge/index.ts
index 10ce3f22f647..5e678b023694 100644
--- a/packages/devextreme-angular/src/ui/linear-gauge/index.ts
+++ b/packages/devextreme-angular/src/ui/linear-gauge/index.ts
@@ -285,10 +285,10 @@ export class DxLinearGaugeComponent extends DxComponent implements OnDestroy, On
     
      */
     @Input()
-    get scale(): { allowDecimals?: boolean | undefined, customMinorTicks?: Array<number>, customTicks?: Array<number>, endValue?: number, horizontalOrientation?: HorizontalAlignment, label?: { customizeText?: ((scaleValue: { value: number, valueText: string }) => string), font?: Font, format?: Format | undefined, indentFromTick?: number, overlappingBehavior?: LabelOverlap, useRangeColors?: boolean, visible?: boolean }, minorTick?: { color?: string, length?: number, opacity?: number, visible?: boolean, width?: number }, minorTickInterval?: number | undefined, scaleDivisionFactor?: number, startValue?: number, tick?: { color?: string, length?: number, opacity?: number, visible?: boolean, width?: number }, tickInterval?: number | undefined, verticalOrientation?: VerticalAlignment } {
+    get scale(): { allowDecimals?: boolean | undefined, customMinorTicks?: Array<number> | undefined, customTicks?: Array<number> | undefined, endValue?: number, horizontalOrientation?: HorizontalAlignment, label?: { customizeText?: ((scaleValue: { value: number, valueText: string }) => string), font?: Font, format?: Format | undefined, indentFromTick?: number, overlappingBehavior?: LabelOverlap, useRangeColors?: boolean, visible?: boolean }, minorTick?: { color?: string, length?: number, opacity?: number, visible?: boolean, width?: number }, minorTickInterval?: number | undefined, scaleDivisionFactor?: number, startValue?: number, tick?: { color?: string, length?: number, opacity?: number, visible?: boolean, width?: number }, tickInterval?: number | undefined, verticalOrientation?: VerticalAlignment } {
         return this._getOption('scale');
     }
-    set scale(value: { allowDecimals?: boolean | undefined, customMinorTicks?: Array<number>, customTicks?: Array<number>, endValue?: number, horizontalOrientation?: HorizontalAlignment, label?: { customizeText?: ((scaleValue: { value: number, valueText: string }) => string), font?: Font, format?: Format | undefined, indentFromTick?: number, overlappingBehavior?: LabelOverlap, useRangeColors?: boolean, visible?: boolean }, minorTick?: { color?: string, length?: number, opacity?: number, visible?: boolean, width?: number }, minorTickInterval?: number | undefined, scaleDivisionFactor?: number, startValue?: number, tick?: { color?: string, length?: number, opacity?: number, visible?: boolean, width?: number }, tickInterval?: number | undefined, verticalOrientation?: VerticalAlignment }) {
+    set scale(value: { allowDecimals?: boolean | undefined, customMinorTicks?: Array<number> | undefined, customTicks?: Array<number> | undefined, endValue?: number, horizontalOrientation?: HorizontalAlignment, label?: { customizeText?: ((scaleValue: { value: number, valueText: string }) => string), font?: Font, format?: Format | undefined, indentFromTick?: number, overlappingBehavior?: LabelOverlap, useRangeColors?: boolean, visible?: boolean }, minorTick?: { color?: string, length?: number, opacity?: number, visible?: boolean, width?: number }, minorTickInterval?: number | undefined, scaleDivisionFactor?: number, startValue?: number, tick?: { color?: string, length?: number, opacity?: number, visible?: boolean, width?: number }, tickInterval?: number | undefined, verticalOrientation?: VerticalAlignment }) {
         this._setOption('scale', value);
     }
 
@@ -324,10 +324,10 @@ export class DxLinearGaugeComponent extends DxComponent implements OnDestroy, On
     
      */
     @Input()
-    get subvalues(): Array<number> {
+    get subvalues(): Array<number> | undefined {
         return this._getOption('subvalues');
     }
-    set subvalues(value: Array<number>) {
+    set subvalues(value: Array<number> | undefined) {
         this._setOption('subvalues', value);
     }
 
@@ -350,10 +350,10 @@ export class DxLinearGaugeComponent extends DxComponent implements OnDestroy, On
     
      */
     @Input()
-    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap } {
+    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string | undefined, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap } {
         return this._getOption('title');
     }
-    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }) {
+    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string | undefined, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }) {
         this._setOption('title', value);
     }
 
@@ -565,7 +565,7 @@ export class DxLinearGaugeComponent extends DxComponent implements OnDestroy, On
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() scaleChange: EventEmitter<{ allowDecimals?: boolean | undefined, customMinorTicks?: Array<number>, customTicks?: Array<number>, endValue?: number, horizontalOrientation?: HorizontalAlignment, label?: { customizeText?: ((scaleValue: { value: number, valueText: string }) => string), font?: Font, format?: Format | undefined, indentFromTick?: number, overlappingBehavior?: LabelOverlap, useRangeColors?: boolean, visible?: boolean }, minorTick?: { color?: string, length?: number, opacity?: number, visible?: boolean, width?: number }, minorTickInterval?: number | undefined, scaleDivisionFactor?: number, startValue?: number, tick?: { color?: string, length?: number, opacity?: number, visible?: boolean, width?: number }, tickInterval?: number | undefined, verticalOrientation?: VerticalAlignment }>;
+    @Output() scaleChange: EventEmitter<{ allowDecimals?: boolean | undefined, customMinorTicks?: Array<number> | undefined, customTicks?: Array<number> | undefined, endValue?: number, horizontalOrientation?: HorizontalAlignment, label?: { customizeText?: ((scaleValue: { value: number, valueText: string }) => string), font?: Font, format?: Format | undefined, indentFromTick?: number, overlappingBehavior?: LabelOverlap, useRangeColors?: boolean, visible?: boolean }, minorTick?: { color?: string, length?: number, opacity?: number, visible?: boolean, width?: number }, minorTickInterval?: number | undefined, scaleDivisionFactor?: number, startValue?: number, tick?: { color?: string, length?: number, opacity?: number, visible?: boolean, width?: number }, tickInterval?: number | undefined, verticalOrientation?: VerticalAlignment }>;
 
     /**
     
@@ -586,7 +586,7 @@ export class DxLinearGaugeComponent extends DxComponent implements OnDestroy, On
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() subvaluesChange: EventEmitter<Array<number>>;
+    @Output() subvaluesChange: EventEmitter<Array<number> | undefined>;
 
     /**
     
@@ -600,7 +600,7 @@ export class DxLinearGaugeComponent extends DxComponent implements OnDestroy, On
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() titleChange: EventEmitter<string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }>;
+    @Output() titleChange: EventEmitter<string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string | undefined, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/linear-gauge/nested/scale.ts b/packages/devextreme-angular/src/ui/linear-gauge/nested/scale.ts
index a833d53a561d..645fdae785ac 100644
--- a/packages/devextreme-angular/src/ui/linear-gauge/nested/scale.ts
+++ b/packages/devextreme-angular/src/ui/linear-gauge/nested/scale.ts
@@ -42,18 +42,18 @@ export class DxoLinearGaugeScaleComponent extends NestedOption implements OnDest
     }
 
     @Input()
-    get customMinorTicks(): Array<number> {
+    get customMinorTicks(): Array<number> | undefined {
         return this._getOption('customMinorTicks');
     }
-    set customMinorTicks(value: Array<number>) {
+    set customMinorTicks(value: Array<number> | undefined) {
         this._setOption('customMinorTicks', value);
     }
 
     @Input()
-    get customTicks(): Array<number> {
+    get customTicks(): Array<number> | undefined {
         return this._getOption('customTicks');
     }
-    set customTicks(value: Array<number>) {
+    set customTicks(value: Array<number> | undefined) {
         this._setOption('customTicks', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/linear-gauge/nested/subtitle.ts b/packages/devextreme-angular/src/ui/linear-gauge/nested/subtitle.ts
index fec9d79e6bb0..478bc8fbc926 100644
--- a/packages/devextreme-angular/src/ui/linear-gauge/nested/subtitle.ts
+++ b/packages/devextreme-angular/src/ui/linear-gauge/nested/subtitle.ts
@@ -48,10 +48,10 @@ export class DxoLinearGaugeSubtitleComponent extends NestedOption implements OnD
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/linear-gauge/nested/title.ts b/packages/devextreme-angular/src/ui/linear-gauge/nested/title.ts
index 5415d0e03233..9a934d8ef47e 100644
--- a/packages/devextreme-angular/src/ui/linear-gauge/nested/title.ts
+++ b/packages/devextreme-angular/src/ui/linear-gauge/nested/title.ts
@@ -65,18 +65,18 @@ export class DxoLinearGaugeTitleComponent extends NestedOption implements OnDest
     }
 
     @Input()
-    get subtitle(): string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap } {
+    get subtitle(): string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap } {
         return this._getOption('subtitle');
     }
-    set subtitle(value: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }) {
+    set subtitle(value: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }) {
         this._setOption('subtitle', value);
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/list/index.ts b/packages/devextreme-angular/src/ui/list/index.ts
index e6f1f0b50405..b5011627beb2 100644
--- a/packages/devextreme-angular/src/ui/list/index.ts
+++ b/packages/devextreme-angular/src/ui/list/index.ts
@@ -378,10 +378,10 @@ export class DxListComponent<TItem = any, TKey = any> extends DxComponent implem
     
      */
     @Input()
-    get keyExpr(): ((item: any) => any) | string {
+    get keyExpr(): ((item: any) => any) | null | string {
         return this._getOption('keyExpr');
     }
-    set keyExpr(value: ((item: any) => any) | string) {
+    set keyExpr(value: ((item: any) => any) | null | string) {
         this._setOption('keyExpr', value);
     }
 
@@ -1118,7 +1118,7 @@ export class DxListComponent<TItem = any, TKey = any> extends DxComponent implem
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() keyExprChange: EventEmitter<((item: any) => any) | string>;
+    @Output() keyExprChange: EventEmitter<((item: any) => any) | null | string>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/list/nested/options.ts b/packages/devextreme-angular/src/ui/list/nested/options.ts
index 1be2d11eaa2a..105b71fe5436 100644
--- a/packages/devextreme-angular/src/ui/list/nested/options.ts
+++ b/packages/devextreme-angular/src/ui/list/nested/options.ts
@@ -114,10 +114,10 @@ export class DxoListOptionsComponent extends NestedOption implements AfterViewIn
     }
 
     @Input()
-    get onClick(): ((e: ClickEvent) => void) {
+    get onClick(): ((e: ClickEvent) => void) | undefined {
         return this._getOption('onClick');
     }
-    set onClick(value: ((e: ClickEvent) => void)) {
+    set onClick(value: ((e: ClickEvent) => void) | undefined) {
         this._setOption('onClick', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/list/nested/search-editor-options.ts b/packages/devextreme-angular/src/ui/list/nested/search-editor-options.ts
index f46fa88a6a2e..776a99efa68e 100644
--- a/packages/devextreme-angular/src/ui/list/nested/search-editor-options.ts
+++ b/packages/devextreme-angular/src/ui/list/nested/search-editor-options.ts
@@ -62,10 +62,10 @@ export class DxoListSearchEditorOptionsComponent extends NestedOption implements
     }
 
     @Input()
-    get buttons(): Array<string | TextBoxPredefinedButton | TextEditorButton> {
+    get buttons(): Array<string | TextBoxPredefinedButton | TextEditorButton> | undefined {
         return this._getOption('buttons');
     }
-    set buttons(value: Array<string | TextBoxPredefinedButton | TextEditorButton>) {
+    set buttons(value: Array<string | TextBoxPredefinedButton | TextEditorButton> | undefined) {
         this._setOption('buttons', value);
     }
 
@@ -190,10 +190,10 @@ export class DxoListSearchEditorOptionsComponent extends NestedOption implements
     }
 
     @Input()
-    get maxLength(): number | string {
+    get maxLength(): null | number | string {
         return this._getOption('maxLength');
     }
-    set maxLength(value: number | string) {
+    set maxLength(value: null | number | string) {
         this._setOption('maxLength', value);
     }
 
@@ -414,18 +414,18 @@ export class DxoListSearchEditorOptionsComponent extends NestedOption implements
     }
 
     @Input()
-    get validationError(): any {
+    get validationError(): any | null {
         return this._getOption('validationError');
     }
-    set validationError(value: any) {
+    set validationError(value: any | null) {
         this._setOption('validationError', value);
     }
 
     @Input()
-    get validationErrors(): Array<any> {
+    get validationErrors(): Array<any> | null {
         return this._getOption('validationErrors');
     }
-    set validationErrors(value: Array<any>) {
+    set validationErrors(value: Array<any> | null) {
         this._setOption('validationErrors', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/lookup/index.ts b/packages/devextreme-angular/src/ui/lookup/index.ts
index e0884d021022..059e14f6275c 100644
--- a/packages/devextreme-angular/src/ui/lookup/index.ts
+++ b/packages/devextreme-angular/src/ui/lookup/index.ts
@@ -753,10 +753,10 @@ export class DxLookupComponent extends DxComponent implements OnDestroy, Control
     
      */
     @Input()
-    get selectedItem(): any {
+    get selectedItem(): any | null {
         return this._getOption('selectedItem');
     }
-    set selectedItem(value: any) {
+    set selectedItem(value: any | null) {
         this._setOption('selectedItem', value);
     }
 
@@ -883,10 +883,10 @@ export class DxLookupComponent extends DxComponent implements OnDestroy, Control
     
      */
     @Input()
-    get validationError(): any {
+    get validationError(): any | null {
         return this._getOption('validationError');
     }
-    set validationError(value: any) {
+    set validationError(value: any | null) {
         this._setOption('validationError', value);
     }
 
@@ -896,10 +896,10 @@ export class DxLookupComponent extends DxComponent implements OnDestroy, Control
     
      */
     @Input()
-    get validationErrors(): Array<any> {
+    get validationErrors(): Array<any> | null {
         return this._getOption('validationErrors');
     }
-    set validationErrors(value: Array<any>) {
+    set validationErrors(value: Array<any> | null) {
         this._setOption('validationErrors', value);
     }
 
@@ -1457,7 +1457,7 @@ export class DxLookupComponent extends DxComponent implements OnDestroy, Control
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() selectedItemChange: EventEmitter<any>;
+    @Output() selectedItemChange: EventEmitter<any | null>;
 
     /**
     
@@ -1527,14 +1527,14 @@ export class DxLookupComponent extends DxComponent implements OnDestroy, Control
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorChange: EventEmitter<any>;
+    @Output() validationErrorChange: EventEmitter<any | null>;
 
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorsChange: EventEmitter<Array<any>>;
+    @Output() validationErrorsChange: EventEmitter<Array<any> | null>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/menu/index.ts b/packages/devextreme-angular/src/ui/menu/index.ts
index f8cb504990d4..7b09772cb94b 100644
--- a/packages/devextreme-angular/src/ui/menu/index.ts
+++ b/packages/devextreme-angular/src/ui/menu/index.ts
@@ -395,10 +395,10 @@ export class DxMenuComponent<TItem = any, TKey = any> extends DxComponent implem
     
      */
     @Input()
-    get selectedItem(): any {
+    get selectedItem(): any | null {
         return this._getOption('selectedItem');
     }
-    set selectedItem(value: any) {
+    set selectedItem(value: any | null) {
         this._setOption('selectedItem', value);
     }
 
@@ -748,7 +748,7 @@ export class DxMenuComponent<TItem = any, TKey = any> extends DxComponent implem
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() selectedItemChange: EventEmitter<any>;
+    @Output() selectedItemChange: EventEmitter<any | null>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/multi-view/index.ts b/packages/devextreme-angular/src/ui/multi-view/index.ts
index ce4635b51482..b447aa4c34fa 100644
--- a/packages/devextreme-angular/src/ui/multi-view/index.ts
+++ b/packages/devextreme-angular/src/ui/multi-view/index.ts
@@ -313,10 +313,10 @@ export class DxMultiViewComponent<TItem = any, TKey = any> extends DxComponent i
     
      */
     @Input()
-    get selectedItem(): any {
+    get selectedItem(): any | null {
         return this._getOption('selectedItem');
     }
-    set selectedItem(value: any) {
+    set selectedItem(value: any | null) {
         this._setOption('selectedItem', value);
     }
 
@@ -575,7 +575,7 @@ export class DxMultiViewComponent<TItem = any, TKey = any> extends DxComponent i
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() selectedItemChange: EventEmitter<any>;
+    @Output() selectedItemChange: EventEmitter<any | null>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/nested/argument-axis.ts b/packages/devextreme-angular/src/ui/nested/argument-axis.ts
index defb08bccf5b..4713b2c0874f 100644
--- a/packages/devextreme-angular/src/ui/nested/argument-axis.ts
+++ b/packages/devextreme-angular/src/ui/nested/argument-axis.ts
@@ -108,10 +108,10 @@ export class DxoArgumentAxisComponent extends NestedOption implements OnDestroy,
     }
 
     @Input()
-    get breaks(): Array<ScaleBreak> {
+    get breaks(): undefined | Array<ScaleBreak> {
         return this._getOption('breaks');
     }
-    set breaks(value: Array<ScaleBreak>) {
+    set breaks(value: undefined | Array<ScaleBreak>) {
         this._setOption('breaks', value);
     }
 
@@ -196,10 +196,10 @@ export class DxoArgumentAxisComponent extends NestedOption implements OnDestroy,
     }
 
     @Input()
-    get holidays(): Array<Date | string | number> {
+    get holidays(): undefined | Array<Date | string | number> {
         return this._getOption('holidays');
     }
-    set holidays(value: Array<Date | string | number>) {
+    set holidays(value: undefined | Array<Date | string | number>) {
         this._setOption('holidays', value);
     }
 
@@ -316,10 +316,10 @@ export class DxoArgumentAxisComponent extends NestedOption implements OnDestroy,
     }
 
     @Input()
-    get placeholderSize(): number {
+    get placeholderSize(): number | null {
         return this._getOption('placeholderSize');
     }
-    set placeholderSize(value: number) {
+    set placeholderSize(value: number | null) {
         this._setOption('placeholderSize', value);
     }
 
@@ -332,10 +332,10 @@ export class DxoArgumentAxisComponent extends NestedOption implements OnDestroy,
     }
 
     @Input()
-    get singleWorkdays(): Array<Date | string | number> {
+    get singleWorkdays(): undefined | Array<Date | string | number> {
         return this._getOption('singleWorkdays');
     }
-    set singleWorkdays(value: Array<Date | string | number>) {
+    set singleWorkdays(value: undefined | Array<Date | string | number>) {
         this._setOption('singleWorkdays', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/nested/base/calendar-options.ts b/packages/devextreme-angular/src/ui/nested/base/calendar-options.ts
index c270b8a4c610..c281bd61d7d5 100644
--- a/packages/devextreme-angular/src/ui/nested/base/calendar-options.ts
+++ b/packages/devextreme-angular/src/ui/nested/base/calendar-options.ts
@@ -47,10 +47,10 @@ export abstract class DxoCalendarOptions extends NestedOption {
         this._setOption('disabled', value);
     }
 
-    get disabledDates(): Function | Array<Date> {
+    get disabledDates(): Function | null | Array<Date> {
         return this._getOption('disabledDates');
     }
-    set disabledDates(value: Function | Array<Date>) {
+    set disabledDates(value: Function | null | Array<Date>) {
         this._setOption('disabledDates', value);
     }
 
@@ -222,17 +222,17 @@ export abstract class DxoCalendarOptions extends NestedOption {
         this._setOption('tabIndex', value);
     }
 
-    get validationError(): any {
+    get validationError(): any | null {
         return this._getOption('validationError');
     }
-    set validationError(value: any) {
+    set validationError(value: any | null) {
         this._setOption('validationError', value);
     }
 
-    get validationErrors(): Array<any> {
+    get validationErrors(): null | Array<any> {
         return this._getOption('validationErrors');
     }
-    set validationErrors(value: Array<any>) {
+    set validationErrors(value: null | Array<any>) {
         this._setOption('validationErrors', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/nested/base/chart-annotation-config-dxi.ts b/packages/devextreme-angular/src/ui/nested/base/chart-annotation-config-dxi.ts
index dff8c492b0fd..bc901120a6e5 100644
--- a/packages/devextreme-angular/src/ui/nested/base/chart-annotation-config-dxi.ts
+++ b/packages/devextreme-angular/src/ui/nested/base/chart-annotation-config-dxi.ts
@@ -257,10 +257,10 @@ export abstract class DxiChartAnnotationConfig extends CollectionNestedOption {
         this._setOption('radius', value);
     }
 
-    get coordinates(): Array<number> {
+    get coordinates(): undefined | Array<number> {
         return this._getOption('coordinates');
     }
-    set coordinates(value: Array<number>) {
+    set coordinates(value: undefined | Array<number>) {
         this._setOption('coordinates', value);
     }
 }
diff --git a/packages/devextreme-angular/src/ui/nested/base/chart-common-annotation-config.ts b/packages/devextreme-angular/src/ui/nested/base/chart-common-annotation-config.ts
index 727b91967099..9aabd72987db 100644
--- a/packages/devextreme-angular/src/ui/nested/base/chart-common-annotation-config.ts
+++ b/packages/devextreme-angular/src/ui/nested/base/chart-common-annotation-config.ts
@@ -250,10 +250,10 @@ export abstract class DxoChartCommonAnnotationConfig extends NestedOption {
         this._setOption('radius', value);
     }
 
-    get coordinates(): Array<number> {
+    get coordinates(): undefined | Array<number> {
         return this._getOption('coordinates');
     }
-    set coordinates(value: Array<number>) {
+    set coordinates(value: undefined | Array<number>) {
         this._setOption('coordinates', value);
     }
 }
diff --git a/packages/devextreme-angular/src/ui/nested/base/file-uploader-options.ts b/packages/devextreme-angular/src/ui/nested/base/file-uploader-options.ts
index 0945065d3add..54ad56232bb5 100644
--- a/packages/devextreme-angular/src/ui/nested/base/file-uploader-options.ts
+++ b/packages/devextreme-angular/src/ui/nested/base/file-uploader-options.ts
@@ -419,17 +419,17 @@ export abstract class DxoFileUploaderOptions extends NestedOption {
         this._setOption('uploadUrl', value);
     }
 
-    get validationError(): any {
+    get validationError(): any | null {
         return this._getOption('validationError');
     }
-    set validationError(value: any) {
+    set validationError(value: any | null) {
         this._setOption('validationError', value);
     }
 
-    get validationErrors(): Array<any> {
+    get validationErrors(): null | Array<any> {
         return this._getOption('validationErrors');
     }
-    set validationErrors(value: Array<any>) {
+    set validationErrors(value: null | Array<any>) {
         this._setOption('validationErrors', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/nested/base/popup-options.ts b/packages/devextreme-angular/src/ui/nested/base/popup-options.ts
index bc31c24c8ad2..35831bc83034 100644
--- a/packages/devextreme-angular/src/ui/nested/base/popup-options.ts
+++ b/packages/devextreme-angular/src/ui/nested/base/popup-options.ts
@@ -162,17 +162,17 @@ export abstract class DxoPopupOptions extends NestedOption {
         this._setOption('minWidth', value);
     }
 
-    get onContentReady(): Function {
+    get onContentReady(): Function | undefined {
         return this._getOption('onContentReady');
     }
-    set onContentReady(value: Function) {
+    set onContentReady(value: Function | undefined) {
         this._setOption('onContentReady', value);
     }
 
-    get onDisposing(): Function {
+    get onDisposing(): Function | undefined {
         return this._getOption('onDisposing');
     }
-    set onDisposing(value: Function) {
+    set onDisposing(value: Function | undefined) {
         this._setOption('onDisposing', value);
     }
 
@@ -190,38 +190,38 @@ export abstract class DxoPopupOptions extends NestedOption {
         this._setOption('onHiding', value);
     }
 
-    get onInitialized(): Function {
+    get onInitialized(): Function | undefined {
         return this._getOption('onInitialized');
     }
-    set onInitialized(value: Function) {
+    set onInitialized(value: Function | undefined) {
         this._setOption('onInitialized', value);
     }
 
-    get onOptionChanged(): Function {
+    get onOptionChanged(): Function | undefined {
         return this._getOption('onOptionChanged');
     }
-    set onOptionChanged(value: Function) {
+    set onOptionChanged(value: Function | undefined) {
         this._setOption('onOptionChanged', value);
     }
 
-    get onResize(): Function {
+    get onResize(): Function | undefined {
         return this._getOption('onResize');
     }
-    set onResize(value: Function) {
+    set onResize(value: Function | undefined) {
         this._setOption('onResize', value);
     }
 
-    get onResizeEnd(): Function {
+    get onResizeEnd(): Function | undefined {
         return this._getOption('onResizeEnd');
     }
-    set onResizeEnd(value: Function) {
+    set onResizeEnd(value: Function | undefined) {
         this._setOption('onResizeEnd', value);
     }
 
-    get onResizeStart(): Function {
+    get onResizeStart(): Function | undefined {
         return this._getOption('onResizeStart');
     }
-    set onResizeStart(value: Function) {
+    set onResizeStart(value: Function | undefined) {
         this._setOption('onResizeStart', value);
     }
 
@@ -239,10 +239,10 @@ export abstract class DxoPopupOptions extends NestedOption {
         this._setOption('onShown', value);
     }
 
-    get onTitleRendered(): Function {
+    get onTitleRendered(): Function | undefined {
         return this._getOption('onTitleRendered');
     }
-    set onTitleRendered(value: Function) {
+    set onTitleRendered(value: Function | undefined) {
         this._setOption('onTitleRendered', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/nested/base/tab-panel-options.ts b/packages/devextreme-angular/src/ui/nested/base/tab-panel-options.ts
index 15573860372e..1f2c002b8bc4 100644
--- a/packages/devextreme-angular/src/ui/nested/base/tab-panel-options.ts
+++ b/packages/devextreme-angular/src/ui/nested/base/tab-panel-options.ts
@@ -273,10 +273,10 @@ export abstract class DxoTabPanelOptions extends NestedOption {
         this._setOption('selectedIndex', value);
     }
 
-    get selectedItem(): any {
+    get selectedItem(): any | null {
         return this._getOption('selectedItem');
     }
-    set selectedItem(value: any) {
+    set selectedItem(value: any | null) {
         this._setOption('selectedItem', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/nested/base/text-box-options.ts b/packages/devextreme-angular/src/ui/nested/base/text-box-options.ts
index 1a966046eb42..be61a1dee2c6 100644
--- a/packages/devextreme-angular/src/ui/nested/base/text-box-options.ts
+++ b/packages/devextreme-angular/src/ui/nested/base/text-box-options.ts
@@ -26,10 +26,10 @@ export abstract class DxoTextBoxOptions extends NestedOption {
         this._setOption('activeStateEnabled', value);
     }
 
-    get buttons(): Array<TextBoxPredefinedButton | TextEditorButton | string> {
+    get buttons(): undefined | Array<TextBoxPredefinedButton | TextEditorButton | string> {
         return this._getOption('buttons');
     }
-    set buttons(value: Array<TextBoxPredefinedButton | TextEditorButton | string>) {
+    set buttons(value: undefined | Array<TextBoxPredefinedButton | TextEditorButton | string>) {
         this._setOption('buttons', value);
     }
 
@@ -138,10 +138,10 @@ export abstract class DxoTextBoxOptions extends NestedOption {
         this._setOption('maskRules', value);
     }
 
-    get maxLength(): number | string {
+    get maxLength(): number | null | string {
         return this._getOption('maxLength');
     }
-    set maxLength(value: number | string) {
+    set maxLength(value: number | null | string) {
         this._setOption('maxLength', value);
     }
 
@@ -334,17 +334,17 @@ export abstract class DxoTextBoxOptions extends NestedOption {
         this._setOption('useMaskedValue', value);
     }
 
-    get validationError(): any {
+    get validationError(): any | null {
         return this._getOption('validationError');
     }
-    set validationError(value: any) {
+    set validationError(value: any | null) {
         this._setOption('validationError', value);
     }
 
-    get validationErrors(): Array<any> {
+    get validationErrors(): null | Array<any> {
         return this._getOption('validationErrors');
     }
-    set validationErrors(value: Array<any>) {
+    set validationErrors(value: null | Array<any>) {
         this._setOption('validationErrors', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/nested/colorizer.ts b/packages/devextreme-angular/src/ui/nested/colorizer.ts
index d1d9fdbf23be..9fccf2762d27 100644
--- a/packages/devextreme-angular/src/ui/nested/colorizer.ts
+++ b/packages/devextreme-angular/src/ui/nested/colorizer.ts
@@ -65,10 +65,10 @@ export class DxoColorizerComponent extends NestedOption implements OnDestroy, On
     }
 
     @Input()
-    get range(): Array<number> {
+    get range(): undefined | Array<number> {
         return this._getOption('range');
     }
-    set range(value: Array<number>) {
+    set range(value: undefined | Array<number>) {
         this._setOption('range', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/nested/common-axis-settings.ts b/packages/devextreme-angular/src/ui/nested/common-axis-settings.ts
index a2a2596ec58d..aaca59da9deb 100644
--- a/packages/devextreme-angular/src/ui/nested/common-axis-settings.ts
+++ b/packages/devextreme-angular/src/ui/nested/common-axis-settings.ts
@@ -154,10 +154,10 @@ export class DxoCommonAxisSettingsComponent extends NestedOption implements OnDe
     }
 
     @Input()
-    get placeholderSize(): number {
+    get placeholderSize(): number | null {
         return this._getOption('placeholderSize');
     }
-    set placeholderSize(value: number) {
+    set placeholderSize(value: number | null) {
         this._setOption('placeholderSize', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/nested/layer-dxi.ts b/packages/devextreme-angular/src/ui/nested/layer-dxi.ts
index 91a313644308..58e3c9d3d2a2 100644
--- a/packages/devextreme-angular/src/ui/nested/layer-dxi.ts
+++ b/packages/devextreme-angular/src/ui/nested/layer-dxi.ts
@@ -73,10 +73,10 @@ export class DxiLayerComponent extends CollectionNestedOption {
     }
 
     @Input()
-    get colorGroups(): Array<number> {
+    get colorGroups(): undefined | Array<number> {
         return this._getOption('colorGroups');
     }
-    set colorGroups(value: Array<number>) {
+    set colorGroups(value: undefined | Array<number>) {
         this._setOption('colorGroups', value);
     }
 
@@ -257,10 +257,10 @@ export class DxiLayerComponent extends CollectionNestedOption {
     }
 
     @Input()
-    get sizeGroups(): Array<number> {
+    get sizeGroups(): undefined | Array<number> {
         return this._getOption('sizeGroups');
     }
-    set sizeGroups(value: Array<number>) {
+    set sizeGroups(value: undefined | Array<number>) {
         this._setOption('sizeGroups', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/nested/legend-dxi.ts b/packages/devextreme-angular/src/ui/nested/legend-dxi.ts
index 9d2a1d33b8e4..0e539351563b 100644
--- a/packages/devextreme-angular/src/ui/nested/legend-dxi.ts
+++ b/packages/devextreme-angular/src/ui/nested/legend-dxi.ts
@@ -215,10 +215,10 @@ export class DxiLegendComponent extends CollectionNestedOption {
     }
 
     @Input()
-    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge } {
+    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined }, text?: string | undefined, verticalAlignment?: VerticalEdge } {
         return this._getOption('title');
     }
-    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge }) {
+    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined }, text?: string | undefined, verticalAlignment?: VerticalEdge }) {
         this._setOption('title', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/nested/legend.ts b/packages/devextreme-angular/src/ui/nested/legend.ts
index 5617aef011d9..e753781d7abd 100644
--- a/packages/devextreme-angular/src/ui/nested/legend.ts
+++ b/packages/devextreme-angular/src/ui/nested/legend.ts
@@ -195,10 +195,10 @@ export class DxoLegendComponent extends NestedOption implements OnDestroy, OnIni
     }
 
     @Input()
-    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge } {
+    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined }, text?: string | undefined, verticalAlignment?: VerticalEdge } {
         return this._getOption('title');
     }
-    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge }) {
+    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined }, text?: string | undefined, verticalAlignment?: VerticalEdge }) {
         this._setOption('title', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/nested/scale.ts b/packages/devextreme-angular/src/ui/nested/scale.ts
index deb8b469b46a..a615d90699c3 100644
--- a/packages/devextreme-angular/src/ui/nested/scale.ts
+++ b/packages/devextreme-angular/src/ui/nested/scale.ts
@@ -55,18 +55,18 @@ export class DxoScaleComponent extends NestedOption implements OnDestroy, OnInit
     }
 
     @Input()
-    get customMinorTicks(): Array<number> {
+    get customMinorTicks(): undefined | Array<number> {
         return this._getOption('customMinorTicks');
     }
-    set customMinorTicks(value: Array<number>) {
+    set customMinorTicks(value: undefined | Array<number>) {
         this._setOption('customMinorTicks', value);
     }
 
     @Input()
-    get customTicks(): Array<number> {
+    get customTicks(): undefined | Array<number> {
         return this._getOption('customTicks');
     }
-    set customTicks(value: Array<number>) {
+    set customTicks(value: undefined | Array<number>) {
         this._setOption('customTicks', value);
     }
 
@@ -175,10 +175,10 @@ export class DxoScaleComponent extends NestedOption implements OnDestroy, OnInit
     }
 
     @Input()
-    get breaks(): Array<ScaleBreak> {
+    get breaks(): undefined | Array<ScaleBreak> {
         return this._getOption('breaks');
     }
-    set breaks(value: Array<ScaleBreak>) {
+    set breaks(value: undefined | Array<ScaleBreak>) {
         this._setOption('breaks', value);
     }
 
@@ -215,10 +215,10 @@ export class DxoScaleComponent extends NestedOption implements OnDestroy, OnInit
     }
 
     @Input()
-    get holidays(): Array<Date | string | number> {
+    get holidays(): undefined | Array<Date | string | number> {
         return this._getOption('holidays');
     }
-    set holidays(value: Array<Date | string | number>) {
+    set holidays(value: undefined | Array<Date | string | number>) {
         this._setOption('holidays', value);
     }
 
@@ -287,10 +287,10 @@ export class DxoScaleComponent extends NestedOption implements OnDestroy, OnInit
     }
 
     @Input()
-    get singleWorkdays(): Array<Date | string | number> {
+    get singleWorkdays(): undefined | Array<Date | string | number> {
         return this._getOption('singleWorkdays');
     }
-    set singleWorkdays(value: Array<Date | string | number>) {
+    set singleWorkdays(value: undefined | Array<Date | string | number>) {
         this._setOption('singleWorkdays', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/nested/subtitle.ts b/packages/devextreme-angular/src/ui/nested/subtitle.ts
index 2419de08727d..afc23fae5527 100644
--- a/packages/devextreme-angular/src/ui/nested/subtitle.ts
+++ b/packages/devextreme-angular/src/ui/nested/subtitle.ts
@@ -48,10 +48,10 @@ export class DxoSubtitleComponent extends NestedOption implements OnDestroy, OnI
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/nested/tab-panel-options.ts b/packages/devextreme-angular/src/ui/nested/tab-panel-options.ts
index 95538c345b89..9bf8a90ac7c0 100644
--- a/packages/devextreme-angular/src/ui/nested/tab-panel-options.ts
+++ b/packages/devextreme-angular/src/ui/nested/tab-panel-options.ts
@@ -110,7 +110,7 @@ export class DxoTabPanelOptionsComponent extends DxoTabPanelOptions implements O
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() selectedItemChange: EventEmitter<any>;
+    @Output() selectedItemChange: EventEmitter<any | null>;
     protected get _optionPath() {
         return 'tabPanelOptions';
     }
diff --git a/packages/devextreme-angular/src/ui/nested/title.ts b/packages/devextreme-angular/src/ui/nested/title.ts
index 11f3ae402d3c..de924852c98c 100644
--- a/packages/devextreme-angular/src/ui/nested/title.ts
+++ b/packages/devextreme-angular/src/ui/nested/title.ts
@@ -65,10 +65,10 @@ export class DxoTitleComponent extends NestedOption implements OnDestroy, OnInit
     }
 
     @Input()
-    get subtitle(): string | { font?: Font, offset?: number, text?: string } | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap } {
+    get subtitle(): string | { font?: Font, offset?: number, text?: string | undefined } | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap } {
         return this._getOption('subtitle');
     }
-    set subtitle(value: string | { font?: Font, offset?: number, text?: string } | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }) {
+    set subtitle(value: string | { font?: Font, offset?: number, text?: string | undefined } | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }) {
         this._setOption('subtitle', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/nested/value-axis-dxi.ts b/packages/devextreme-angular/src/ui/nested/value-axis-dxi.ts
index fa149fa07709..29072979c12a 100644
--- a/packages/devextreme-angular/src/ui/nested/value-axis-dxi.ts
+++ b/packages/devextreme-angular/src/ui/nested/value-axis-dxi.ts
@@ -96,10 +96,10 @@ export class DxiValueAxisComponent extends CollectionNestedOption {
     }
 
     @Input()
-    get breaks(): Array<ScaleBreak> {
+    get breaks(): undefined | Array<ScaleBreak> {
         return this._getOption('breaks');
     }
-    set breaks(value: Array<ScaleBreak>) {
+    set breaks(value: undefined | Array<ScaleBreak>) {
         this._setOption('breaks', value);
     }
 
@@ -312,10 +312,10 @@ export class DxiValueAxisComponent extends CollectionNestedOption {
     }
 
     @Input()
-    get placeholderSize(): number {
+    get placeholderSize(): number | null {
         return this._getOption('placeholderSize');
     }
-    set placeholderSize(value: number) {
+    set placeholderSize(value: number | null) {
         this._setOption('placeholderSize', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/number-box/index.ts b/packages/devextreme-angular/src/ui/number-box/index.ts
index c7dd1a4da872..7ffe5f929957 100644
--- a/packages/devextreme-angular/src/ui/number-box/index.ts
+++ b/packages/devextreme-angular/src/ui/number-box/index.ts
@@ -121,10 +121,10 @@ export class DxNumberBoxComponent extends DxComponent implements OnDestroy, Cont
     
      */
     @Input()
-    get buttons(): Array<NumberBoxPredefinedButton | TextEditorButton> {
+    get buttons(): Array<NumberBoxPredefinedButton | TextEditorButton> | undefined {
         return this._getOption('buttons');
     }
-    set buttons(value: Array<NumberBoxPredefinedButton | TextEditorButton>) {
+    set buttons(value: Array<NumberBoxPredefinedButton | TextEditorButton> | undefined) {
         this._setOption('buttons', value);
     }
 
@@ -485,10 +485,10 @@ export class DxNumberBoxComponent extends DxComponent implements OnDestroy, Cont
     
      */
     @Input()
-    get validationError(): any {
+    get validationError(): any | null {
         return this._getOption('validationError');
     }
-    set validationError(value: any) {
+    set validationError(value: any | null) {
         this._setOption('validationError', value);
     }
 
@@ -498,10 +498,10 @@ export class DxNumberBoxComponent extends DxComponent implements OnDestroy, Cont
     
      */
     @Input()
-    get validationErrors(): Array<any> {
+    get validationErrors(): Array<any> | null {
         return this._getOption('validationErrors');
     }
-    set validationErrors(value: Array<any>) {
+    set validationErrors(value: Array<any> | null) {
         this._setOption('validationErrors', value);
     }
 
@@ -735,7 +735,7 @@ export class DxNumberBoxComponent extends DxComponent implements OnDestroy, Cont
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() buttonsChange: EventEmitter<Array<NumberBoxPredefinedButton | TextEditorButton>>;
+    @Output() buttonsChange: EventEmitter<Array<NumberBoxPredefinedButton | TextEditorButton> | undefined>;
 
     /**
     
@@ -931,14 +931,14 @@ export class DxNumberBoxComponent extends DxComponent implements OnDestroy, Cont
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorChange: EventEmitter<any>;
+    @Output() validationErrorChange: EventEmitter<any | null>;
 
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorsChange: EventEmitter<Array<any>>;
+    @Output() validationErrorsChange: EventEmitter<Array<any> | null>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/number-box/nested/options.ts b/packages/devextreme-angular/src/ui/number-box/nested/options.ts
index 855eaf5533b4..a15856dab74e 100644
--- a/packages/devextreme-angular/src/ui/number-box/nested/options.ts
+++ b/packages/devextreme-angular/src/ui/number-box/nested/options.ts
@@ -114,10 +114,10 @@ export class DxoNumberBoxOptionsComponent extends NestedOption implements AfterV
     }
 
     @Input()
-    get onClick(): ((e: ClickEvent) => void) {
+    get onClick(): ((e: ClickEvent) => void) | undefined {
         return this._getOption('onClick');
     }
-    set onClick(value: ((e: ClickEvent) => void)) {
+    set onClick(value: ((e: ClickEvent) => void) | undefined) {
         this._setOption('onClick', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/pie-chart/index.ts b/packages/devextreme-angular/src/ui/pie-chart/index.ts
index 8244b2a5fc7e..ee81cec851be 100644
--- a/packages/devextreme-angular/src/ui/pie-chart/index.ts
+++ b/packages/devextreme-angular/src/ui/pie-chart/index.ts
@@ -344,10 +344,10 @@ export class DxPieChartComponent extends DxComponent implements OnDestroy, OnCha
     
      */
     @Input()
-    get legend(): { backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((pointInfo: { pointColor: string, pointIndex: number, pointName: any }) => string), customizeItems?: ((items: Array<PieChartLegendItem>) => Array<PieChartLegendItem>), customizeText?: ((pointInfo: { pointColor: string, pointIndex: number, pointName: any }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, hoverMode?: PieChartLegendHoverMode, itemsAlignment?: HorizontalAlignment | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, rowCount?: number, rowItemSpacing?: number, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean } {
+    get legend(): { backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((pointInfo: { pointColor: string, pointIndex: number, pointName: any }) => string), customizeItems?: ((items: Array<PieChartLegendItem>) => Array<PieChartLegendItem>), customizeText?: ((pointInfo: { pointColor: string, pointIndex: number, pointName: any }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, hoverMode?: PieChartLegendHoverMode, itemsAlignment?: HorizontalAlignment | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, rowCount?: number, rowItemSpacing?: number, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined }, text?: string | undefined, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean } {
         return this._getOption('legend');
     }
-    set legend(value: { backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((pointInfo: { pointColor: string, pointIndex: number, pointName: any }) => string), customizeItems?: ((items: Array<PieChartLegendItem>) => Array<PieChartLegendItem>), customizeText?: ((pointInfo: { pointColor: string, pointIndex: number, pointName: any }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, hoverMode?: PieChartLegendHoverMode, itemsAlignment?: HorizontalAlignment | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, rowCount?: number, rowItemSpacing?: number, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean }) {
+    set legend(value: { backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((pointInfo: { pointColor: string, pointIndex: number, pointName: any }) => string), customizeItems?: ((items: Array<PieChartLegendItem>) => Array<PieChartLegendItem>), customizeText?: ((pointInfo: { pointColor: string, pointIndex: number, pointName: any }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, hoverMode?: PieChartLegendHoverMode, itemsAlignment?: HorizontalAlignment | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, rowCount?: number, rowItemSpacing?: number, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined }, text?: string | undefined, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean }) {
         this._setOption('legend', value);
     }
 
@@ -578,10 +578,10 @@ export class DxPieChartComponent extends DxComponent implements OnDestroy, OnCha
     
      */
     @Input()
-    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap } {
+    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string | undefined, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap } {
         return this._getOption('title');
     }
-    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }) {
+    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string | undefined, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }) {
         this._setOption('title', value);
     }
 
@@ -841,7 +841,7 @@ export class DxPieChartComponent extends DxComponent implements OnDestroy, OnCha
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() legendChange: EventEmitter<{ backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((pointInfo: { pointColor: string, pointIndex: number, pointName: any }) => string), customizeItems?: ((items: Array<PieChartLegendItem>) => Array<PieChartLegendItem>), customizeText?: ((pointInfo: { pointColor: string, pointIndex: number, pointName: any }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, hoverMode?: PieChartLegendHoverMode, itemsAlignment?: HorizontalAlignment | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, rowCount?: number, rowItemSpacing?: number, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean }>;
+    @Output() legendChange: EventEmitter<{ backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((pointInfo: { pointColor: string, pointIndex: number, pointName: any }) => string), customizeItems?: ((items: Array<PieChartLegendItem>) => Array<PieChartLegendItem>), customizeText?: ((pointInfo: { pointColor: string, pointIndex: number, pointName: any }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, hoverMode?: PieChartLegendHoverMode, itemsAlignment?: HorizontalAlignment | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, rowCount?: number, rowItemSpacing?: number, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined }, text?: string | undefined, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean }>;
 
     /**
     
@@ -967,7 +967,7 @@ export class DxPieChartComponent extends DxComponent implements OnDestroy, OnCha
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() titleChange: EventEmitter<string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }>;
+    @Output() titleChange: EventEmitter<string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string | undefined, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/pie-chart/nested/legend-title-subtitle.ts b/packages/devextreme-angular/src/ui/pie-chart/nested/legend-title-subtitle.ts
index 89b97fbd8a02..fad6fcaab898 100644
--- a/packages/devextreme-angular/src/ui/pie-chart/nested/legend-title-subtitle.ts
+++ b/packages/devextreme-angular/src/ui/pie-chart/nested/legend-title-subtitle.ts
@@ -48,10 +48,10 @@ export class DxoPieChartLegendTitleSubtitleComponent extends NestedOption implem
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/pie-chart/nested/legend-title.ts b/packages/devextreme-angular/src/ui/pie-chart/nested/legend-title.ts
index cfa91cfca49f..14f9bff04956 100644
--- a/packages/devextreme-angular/src/ui/pie-chart/nested/legend-title.ts
+++ b/packages/devextreme-angular/src/ui/pie-chart/nested/legend-title.ts
@@ -65,18 +65,18 @@ export class DxoPieChartLegendTitleComponent extends NestedOption implements OnD
     }
 
     @Input()
-    get subtitle(): string | { font?: Font, offset?: number, text?: string } {
+    get subtitle(): string | { font?: Font, offset?: number, text?: string | undefined } {
         return this._getOption('subtitle');
     }
-    set subtitle(value: string | { font?: Font, offset?: number, text?: string }) {
+    set subtitle(value: string | { font?: Font, offset?: number, text?: string | undefined }) {
         this._setOption('subtitle', value);
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/pie-chart/nested/legend.ts b/packages/devextreme-angular/src/ui/pie-chart/nested/legend.ts
index af8ad8fe0def..491d8747cf9f 100644
--- a/packages/devextreme-angular/src/ui/pie-chart/nested/legend.ts
+++ b/packages/devextreme-angular/src/ui/pie-chart/nested/legend.ts
@@ -194,10 +194,10 @@ export class DxoPieChartLegendComponent extends NestedOption implements OnDestro
     }
 
     @Input()
-    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge } {
+    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined }, text?: string | undefined, verticalAlignment?: VerticalEdge } {
         return this._getOption('title');
     }
-    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge }) {
+    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined }, text?: string | undefined, verticalAlignment?: VerticalEdge }) {
         this._setOption('title', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/pie-chart/nested/pie-chart-title-subtitle.ts b/packages/devextreme-angular/src/ui/pie-chart/nested/pie-chart-title-subtitle.ts
index 5e68c9bd654e..6a4fcfdc89c7 100644
--- a/packages/devextreme-angular/src/ui/pie-chart/nested/pie-chart-title-subtitle.ts
+++ b/packages/devextreme-angular/src/ui/pie-chart/nested/pie-chart-title-subtitle.ts
@@ -48,10 +48,10 @@ export class DxoPieChartPieChartTitleSubtitleComponent extends NestedOption impl
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/pie-chart/nested/pie-chart-title.ts b/packages/devextreme-angular/src/ui/pie-chart/nested/pie-chart-title.ts
index 60943af17edc..dfa044b0a08b 100644
--- a/packages/devextreme-angular/src/ui/pie-chart/nested/pie-chart-title.ts
+++ b/packages/devextreme-angular/src/ui/pie-chart/nested/pie-chart-title.ts
@@ -65,18 +65,18 @@ export class DxoPieChartPieChartTitleComponent extends NestedOption implements O
     }
 
     @Input()
-    get subtitle(): string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap } {
+    get subtitle(): string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap } {
         return this._getOption('subtitle');
     }
-    set subtitle(value: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }) {
+    set subtitle(value: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }) {
         this._setOption('subtitle', value);
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/pie-chart/nested/subtitle.ts b/packages/devextreme-angular/src/ui/pie-chart/nested/subtitle.ts
index 049a1838a4e0..b54ba237e807 100644
--- a/packages/devextreme-angular/src/ui/pie-chart/nested/subtitle.ts
+++ b/packages/devextreme-angular/src/ui/pie-chart/nested/subtitle.ts
@@ -48,10 +48,10 @@ export class DxoPieChartSubtitleComponent extends NestedOption implements OnDest
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/pie-chart/nested/title.ts b/packages/devextreme-angular/src/ui/pie-chart/nested/title.ts
index 1792ebff123e..611675df1d66 100644
--- a/packages/devextreme-angular/src/ui/pie-chart/nested/title.ts
+++ b/packages/devextreme-angular/src/ui/pie-chart/nested/title.ts
@@ -65,18 +65,18 @@ export class DxoPieChartTitleComponent extends NestedOption implements OnDestroy
     }
 
     @Input()
-    get subtitle(): string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap } {
+    get subtitle(): string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap } {
         return this._getOption('subtitle');
     }
-    set subtitle(value: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }) {
+    set subtitle(value: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }) {
         this._setOption('subtitle', value);
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/polar-chart/index.ts b/packages/devextreme-angular/src/ui/polar-chart/index.ts
index e6b46512b85c..c4f461b19e6e 100644
--- a/packages/devextreme-angular/src/ui/polar-chart/index.ts
+++ b/packages/devextreme-angular/src/ui/polar-chart/index.ts
@@ -452,10 +452,10 @@ export class DxPolarChartComponent extends DxComponent implements OnDestroy, OnC
     
      */
     @Input()
-    get legend(): { backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((seriesInfo: { seriesColor: string, seriesIndex: number, seriesName: any }) => string), customizeItems?: ((items: Array<LegendItem>) => Array<LegendItem>), customizeText?: ((seriesInfo: { seriesColor: string, seriesIndex: number, seriesName: any }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, hoverMode?: LegendHoverMode, itemsAlignment?: HorizontalAlignment | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, rowCount?: number, rowItemSpacing?: number, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean } {
+    get legend(): { backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((seriesInfo: { seriesColor: string, seriesIndex: number, seriesName: any }) => string), customizeItems?: ((items: Array<LegendItem>) => Array<LegendItem>), customizeText?: ((seriesInfo: { seriesColor: string, seriesIndex: number, seriesName: any }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, hoverMode?: LegendHoverMode, itemsAlignment?: HorizontalAlignment | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, rowCount?: number, rowItemSpacing?: number, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined }, text?: string | undefined, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean } {
         return this._getOption('legend');
     }
-    set legend(value: { backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((seriesInfo: { seriesColor: string, seriesIndex: number, seriesName: any }) => string), customizeItems?: ((items: Array<LegendItem>) => Array<LegendItem>), customizeText?: ((seriesInfo: { seriesColor: string, seriesIndex: number, seriesName: any }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, hoverMode?: LegendHoverMode, itemsAlignment?: HorizontalAlignment | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, rowCount?: number, rowItemSpacing?: number, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean }) {
+    set legend(value: { backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((seriesInfo: { seriesColor: string, seriesIndex: number, seriesName: any }) => string), customizeItems?: ((items: Array<LegendItem>) => Array<LegendItem>), customizeText?: ((seriesInfo: { seriesColor: string, seriesIndex: number, seriesName: any }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, hoverMode?: LegendHoverMode, itemsAlignment?: HorizontalAlignment | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, rowCount?: number, rowItemSpacing?: number, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined }, text?: string | undefined, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean }) {
         this._setOption('legend', value);
     }
 
@@ -660,10 +660,10 @@ export class DxPolarChartComponent extends DxComponent implements OnDestroy, OnC
     
      */
     @Input()
-    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap } {
+    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string | undefined, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap } {
         return this._getOption('title');
     }
-    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }) {
+    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string | undefined, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }) {
         this._setOption('title', value);
     }
 
@@ -1005,7 +1005,7 @@ export class DxPolarChartComponent extends DxComponent implements OnDestroy, OnC
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() legendChange: EventEmitter<{ backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((seriesInfo: { seriesColor: string, seriesIndex: number, seriesName: any }) => string), customizeItems?: ((items: Array<LegendItem>) => Array<LegendItem>), customizeText?: ((seriesInfo: { seriesColor: string, seriesIndex: number, seriesName: any }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, hoverMode?: LegendHoverMode, itemsAlignment?: HorizontalAlignment | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, rowCount?: number, rowItemSpacing?: number, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean }>;
+    @Output() legendChange: EventEmitter<{ backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((seriesInfo: { seriesColor: string, seriesIndex: number, seriesName: any }) => string), customizeItems?: ((items: Array<LegendItem>) => Array<LegendItem>), customizeText?: ((seriesInfo: { seriesColor: string, seriesIndex: number, seriesName: any }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, hoverMode?: LegendHoverMode, itemsAlignment?: HorizontalAlignment | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, rowCount?: number, rowItemSpacing?: number, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined }, text?: string | undefined, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean }>;
 
     /**
     
@@ -1117,7 +1117,7 @@ export class DxPolarChartComponent extends DxComponent implements OnDestroy, OnC
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() titleChange: EventEmitter<string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }>;
+    @Output() titleChange: EventEmitter<string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string | undefined, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/legend-title-subtitle.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/legend-title-subtitle.ts
index f86fc2af1c2a..9e9969fd5269 100644
--- a/packages/devextreme-angular/src/ui/polar-chart/nested/legend-title-subtitle.ts
+++ b/packages/devextreme-angular/src/ui/polar-chart/nested/legend-title-subtitle.ts
@@ -48,10 +48,10 @@ export class DxoPolarChartLegendTitleSubtitleComponent extends NestedOption impl
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/legend-title.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/legend-title.ts
index 09b035fc7f2b..a45aa8a24f1b 100644
--- a/packages/devextreme-angular/src/ui/polar-chart/nested/legend-title.ts
+++ b/packages/devextreme-angular/src/ui/polar-chart/nested/legend-title.ts
@@ -65,18 +65,18 @@ export class DxoPolarChartLegendTitleComponent extends NestedOption implements O
     }
 
     @Input()
-    get subtitle(): string | { font?: Font, offset?: number, text?: string } {
+    get subtitle(): string | { font?: Font, offset?: number, text?: string | undefined } {
         return this._getOption('subtitle');
     }
-    set subtitle(value: string | { font?: Font, offset?: number, text?: string }) {
+    set subtitle(value: string | { font?: Font, offset?: number, text?: string | undefined }) {
         this._setOption('subtitle', value);
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/legend.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/legend.ts
index df21a4b74203..886b60534ed5 100644
--- a/packages/devextreme-angular/src/ui/polar-chart/nested/legend.ts
+++ b/packages/devextreme-angular/src/ui/polar-chart/nested/legend.ts
@@ -193,10 +193,10 @@ export class DxoPolarChartLegendComponent extends NestedOption implements OnDest
     }
 
     @Input()
-    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge } {
+    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined }, text?: string | undefined, verticalAlignment?: VerticalEdge } {
         return this._getOption('title');
     }
-    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge }) {
+    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined }, text?: string | undefined, verticalAlignment?: VerticalEdge }) {
         this._setOption('title', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/polar-chart-title-subtitle.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/polar-chart-title-subtitle.ts
index eee8da73ad2c..531afa67a79d 100644
--- a/packages/devextreme-angular/src/ui/polar-chart/nested/polar-chart-title-subtitle.ts
+++ b/packages/devextreme-angular/src/ui/polar-chart/nested/polar-chart-title-subtitle.ts
@@ -48,10 +48,10 @@ export class DxoPolarChartPolarChartTitleSubtitleComponent extends NestedOption
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/polar-chart-title.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/polar-chart-title.ts
index da167d6a40cd..0da5847a4ffe 100644
--- a/packages/devextreme-angular/src/ui/polar-chart/nested/polar-chart-title.ts
+++ b/packages/devextreme-angular/src/ui/polar-chart/nested/polar-chart-title.ts
@@ -65,18 +65,18 @@ export class DxoPolarChartPolarChartTitleComponent extends NestedOption implemen
     }
 
     @Input()
-    get subtitle(): string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap } {
+    get subtitle(): string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap } {
         return this._getOption('subtitle');
     }
-    set subtitle(value: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }) {
+    set subtitle(value: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }) {
         this._setOption('subtitle', value);
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/subtitle.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/subtitle.ts
index a9f92a48e99e..38035ba53fbf 100644
--- a/packages/devextreme-angular/src/ui/polar-chart/nested/subtitle.ts
+++ b/packages/devextreme-angular/src/ui/polar-chart/nested/subtitle.ts
@@ -48,10 +48,10 @@ export class DxoPolarChartSubtitleComponent extends NestedOption implements OnDe
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/polar-chart/nested/title.ts b/packages/devextreme-angular/src/ui/polar-chart/nested/title.ts
index d31de1c995c7..a4324f7cbe25 100644
--- a/packages/devextreme-angular/src/ui/polar-chart/nested/title.ts
+++ b/packages/devextreme-angular/src/ui/polar-chart/nested/title.ts
@@ -65,18 +65,18 @@ export class DxoPolarChartTitleComponent extends NestedOption implements OnDestr
     }
 
     @Input()
-    get subtitle(): string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap } {
+    get subtitle(): string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap } {
         return this._getOption('subtitle');
     }
-    set subtitle(value: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }) {
+    set subtitle(value: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }) {
         this._setOption('subtitle', value);
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/progress-bar/index.ts b/packages/devextreme-angular/src/ui/progress-bar/index.ts
index 8dbdfeb5866b..462ab8a0aece 100644
--- a/packages/devextreme-angular/src/ui/progress-bar/index.ts
+++ b/packages/devextreme-angular/src/ui/progress-bar/index.ts
@@ -246,10 +246,10 @@ export class DxProgressBarComponent extends DxComponent implements OnDestroy, Co
     
      */
     @Input()
-    get validationError(): any {
+    get validationError(): any | null {
         return this._getOption('validationError');
     }
-    set validationError(value: any) {
+    set validationError(value: any | null) {
         this._setOption('validationError', value);
     }
 
@@ -259,10 +259,10 @@ export class DxProgressBarComponent extends DxComponent implements OnDestroy, Co
     
      */
     @Input()
-    get validationErrors(): Array<any> {
+    get validationErrors(): Array<any> | null {
         return this._getOption('validationErrors');
     }
-    set validationErrors(value: Array<any>) {
+    set validationErrors(value: Array<any> | null) {
         this._setOption('validationErrors', value);
     }
 
@@ -488,14 +488,14 @@ export class DxProgressBarComponent extends DxComponent implements OnDestroy, Co
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorChange: EventEmitter<any>;
+    @Output() validationErrorChange: EventEmitter<any | null>;
 
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorsChange: EventEmitter<Array<any>>;
+    @Output() validationErrorsChange: EventEmitter<Array<any> | null>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/radio-group/index.ts b/packages/devextreme-angular/src/ui/radio-group/index.ts
index 2733f930ecd8..76ad64161cd7 100644
--- a/packages/devextreme-angular/src/ui/radio-group/index.ts
+++ b/packages/devextreme-angular/src/ui/radio-group/index.ts
@@ -340,10 +340,10 @@ export class DxRadioGroupComponent extends DxComponent implements OnDestroy, Con
     
      */
     @Input()
-    get validationError(): any {
+    get validationError(): any | null {
         return this._getOption('validationError');
     }
-    set validationError(value: any) {
+    set validationError(value: any | null) {
         this._setOption('validationError', value);
     }
 
@@ -353,10 +353,10 @@ export class DxRadioGroupComponent extends DxComponent implements OnDestroy, Con
     
      */
     @Input()
-    get validationErrors(): Array<any> {
+    get validationErrors(): Array<any> | null {
         return this._getOption('validationErrors');
     }
-    set validationErrors(value: Array<any>) {
+    set validationErrors(value: Array<any> | null) {
         this._setOption('validationErrors', value);
     }
 
@@ -629,14 +629,14 @@ export class DxRadioGroupComponent extends DxComponent implements OnDestroy, Con
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorChange: EventEmitter<any>;
+    @Output() validationErrorChange: EventEmitter<any | null>;
 
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorsChange: EventEmitter<Array<any>>;
+    @Output() validationErrorsChange: EventEmitter<Array<any> | null>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/range-selector/index.ts b/packages/devextreme-angular/src/ui/range-selector/index.ts
index 95e04e4bf628..df57da06a0fd 100644
--- a/packages/devextreme-angular/src/ui/range-selector/index.ts
+++ b/packages/devextreme-angular/src/ui/range-selector/index.ts
@@ -427,10 +427,10 @@ export class DxRangeSelectorComponent extends DxComponent implements OnDestroy,
     
      */
     @Input()
-    get scale(): { aggregationGroupWidth?: number | undefined, aggregationInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, allowDecimals?: boolean | undefined, breaks?: Array<ScaleBreak> | { endValue?: Date | number | string | undefined, startValue?: Date | number | string | undefined }[], breakStyle?: { color?: string, line?: ScaleBreakLineStyle, width?: number }, categories?: Array<Date | number | string>, discreteAxisDivisionMode?: DiscreteAxisDivisionMode, endOnTick?: boolean, endValue?: Date | number | string | undefined, holidays?: Array<Date | string> | Array<number>, label?: { customizeText?: ((scaleValue: { value: Date | number | string, valueText: string }) => string), font?: Font, format?: Format | undefined, overlappingBehavior?: LabelOverlap, topIndent?: number, visible?: boolean }, linearThreshold?: number, logarithmBase?: number, marker?: { label?: { customizeText?: ((markerValue: { value: Date | number, valueText: string }) => string), format?: Format | undefined }, separatorHeight?: number, textLeftIndent?: number, textTopIndent?: number, topIndent?: number, visible?: boolean }, maxRange?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, minorTick?: { color?: string, opacity?: number, visible?: boolean, width?: number }, minorTickCount?: number | undefined, minorTickInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, minRange?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, placeholderHeight?: number | undefined, showCustomBoundaryTicks?: boolean, singleWorkdays?: Array<Date | string> | Array<number>, startValue?: Date | number | string | undefined, tick?: { color?: string, opacity?: number, width?: number }, tickInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, type?: AxisScale | undefined, valueType?: ChartsDataType | undefined, workdaysOnly?: boolean, workWeek?: Array<number> } {
+    get scale(): { aggregationGroupWidth?: number | undefined, aggregationInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, allowDecimals?: boolean | undefined, breaks?: Array<ScaleBreak> | undefined | { endValue?: Date | number | string | undefined, startValue?: Date | number | string | undefined }[], breakStyle?: { color?: string, line?: ScaleBreakLineStyle, width?: number }, categories?: Array<Date | number | string>, discreteAxisDivisionMode?: DiscreteAxisDivisionMode, endOnTick?: boolean, endValue?: Date | number | string | undefined, holidays?: Array<Date | string> | Array<number> | undefined, label?: { customizeText?: ((scaleValue: { value: Date | number | string, valueText: string }) => string), font?: Font, format?: Format | undefined, overlappingBehavior?: LabelOverlap, topIndent?: number, visible?: boolean }, linearThreshold?: number, logarithmBase?: number, marker?: { label?: { customizeText?: ((markerValue: { value: Date | number, valueText: string }) => string), format?: Format | undefined }, separatorHeight?: number, textLeftIndent?: number, textTopIndent?: number, topIndent?: number, visible?: boolean }, maxRange?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, minorTick?: { color?: string, opacity?: number, visible?: boolean, width?: number }, minorTickCount?: number | undefined, minorTickInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, minRange?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, placeholderHeight?: number | undefined, showCustomBoundaryTicks?: boolean, singleWorkdays?: Array<Date | string> | Array<number> | undefined, startValue?: Date | number | string | undefined, tick?: { color?: string, opacity?: number, width?: number }, tickInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, type?: AxisScale | undefined, valueType?: ChartsDataType | undefined, workdaysOnly?: boolean, workWeek?: Array<number> } {
         return this._getOption('scale');
     }
-    set scale(value: { aggregationGroupWidth?: number | undefined, aggregationInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, allowDecimals?: boolean | undefined, breaks?: Array<ScaleBreak> | { endValue?: Date | number | string | undefined, startValue?: Date | number | string | undefined }[], breakStyle?: { color?: string, line?: ScaleBreakLineStyle, width?: number }, categories?: Array<Date | number | string>, discreteAxisDivisionMode?: DiscreteAxisDivisionMode, endOnTick?: boolean, endValue?: Date | number | string | undefined, holidays?: Array<Date | string> | Array<number>, label?: { customizeText?: ((scaleValue: { value: Date | number | string, valueText: string }) => string), font?: Font, format?: Format | undefined, overlappingBehavior?: LabelOverlap, topIndent?: number, visible?: boolean }, linearThreshold?: number, logarithmBase?: number, marker?: { label?: { customizeText?: ((markerValue: { value: Date | number, valueText: string }) => string), format?: Format | undefined }, separatorHeight?: number, textLeftIndent?: number, textTopIndent?: number, topIndent?: number, visible?: boolean }, maxRange?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, minorTick?: { color?: string, opacity?: number, visible?: boolean, width?: number }, minorTickCount?: number | undefined, minorTickInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, minRange?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, placeholderHeight?: number | undefined, showCustomBoundaryTicks?: boolean, singleWorkdays?: Array<Date | string> | Array<number>, startValue?: Date | number | string | undefined, tick?: { color?: string, opacity?: number, width?: number }, tickInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, type?: AxisScale | undefined, valueType?: ChartsDataType | undefined, workdaysOnly?: boolean, workWeek?: Array<number> }) {
+    set scale(value: { aggregationGroupWidth?: number | undefined, aggregationInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, allowDecimals?: boolean | undefined, breaks?: Array<ScaleBreak> | undefined | { endValue?: Date | number | string | undefined, startValue?: Date | number | string | undefined }[], breakStyle?: { color?: string, line?: ScaleBreakLineStyle, width?: number }, categories?: Array<Date | number | string>, discreteAxisDivisionMode?: DiscreteAxisDivisionMode, endOnTick?: boolean, endValue?: Date | number | string | undefined, holidays?: Array<Date | string> | Array<number> | undefined, label?: { customizeText?: ((scaleValue: { value: Date | number | string, valueText: string }) => string), font?: Font, format?: Format | undefined, overlappingBehavior?: LabelOverlap, topIndent?: number, visible?: boolean }, linearThreshold?: number, logarithmBase?: number, marker?: { label?: { customizeText?: ((markerValue: { value: Date | number, valueText: string }) => string), format?: Format | undefined }, separatorHeight?: number, textLeftIndent?: number, textTopIndent?: number, topIndent?: number, visible?: boolean }, maxRange?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, minorTick?: { color?: string, opacity?: number, visible?: boolean, width?: number }, minorTickCount?: number | undefined, minorTickInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, minRange?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, placeholderHeight?: number | undefined, showCustomBoundaryTicks?: boolean, singleWorkdays?: Array<Date | string> | Array<number> | undefined, startValue?: Date | number | string | undefined, tick?: { color?: string, opacity?: number, width?: number }, tickInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, type?: AxisScale | undefined, valueType?: ChartsDataType | undefined, workdaysOnly?: boolean, workWeek?: Array<number> }) {
         this._setOption('scale', value);
     }
 
@@ -531,10 +531,10 @@ export class DxRangeSelectorComponent extends DxComponent implements OnDestroy,
     
      */
     @Input()
-    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap } {
+    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string | undefined, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap } {
         return this._getOption('title');
     }
-    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }) {
+    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string | undefined, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }) {
         this._setOption('title', value);
     }
 
@@ -733,7 +733,7 @@ export class DxRangeSelectorComponent extends DxComponent implements OnDestroy,
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() scaleChange: EventEmitter<{ aggregationGroupWidth?: number | undefined, aggregationInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, allowDecimals?: boolean | undefined, breaks?: Array<ScaleBreak> | { endValue?: Date | number | string | undefined, startValue?: Date | number | string | undefined }[], breakStyle?: { color?: string, line?: ScaleBreakLineStyle, width?: number }, categories?: Array<Date | number | string>, discreteAxisDivisionMode?: DiscreteAxisDivisionMode, endOnTick?: boolean, endValue?: Date | number | string | undefined, holidays?: Array<Date | string> | Array<number>, label?: { customizeText?: ((scaleValue: { value: Date | number | string, valueText: string }) => string), font?: Font, format?: Format | undefined, overlappingBehavior?: LabelOverlap, topIndent?: number, visible?: boolean }, linearThreshold?: number, logarithmBase?: number, marker?: { label?: { customizeText?: ((markerValue: { value: Date | number, valueText: string }) => string), format?: Format | undefined }, separatorHeight?: number, textLeftIndent?: number, textTopIndent?: number, topIndent?: number, visible?: boolean }, maxRange?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, minorTick?: { color?: string, opacity?: number, visible?: boolean, width?: number }, minorTickCount?: number | undefined, minorTickInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, minRange?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, placeholderHeight?: number | undefined, showCustomBoundaryTicks?: boolean, singleWorkdays?: Array<Date | string> | Array<number>, startValue?: Date | number | string | undefined, tick?: { color?: string, opacity?: number, width?: number }, tickInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, type?: AxisScale | undefined, valueType?: ChartsDataType | undefined, workdaysOnly?: boolean, workWeek?: Array<number> }>;
+    @Output() scaleChange: EventEmitter<{ aggregationGroupWidth?: number | undefined, aggregationInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, allowDecimals?: boolean | undefined, breaks?: Array<ScaleBreak> | undefined | { endValue?: Date | number | string | undefined, startValue?: Date | number | string | undefined }[], breakStyle?: { color?: string, line?: ScaleBreakLineStyle, width?: number }, categories?: Array<Date | number | string>, discreteAxisDivisionMode?: DiscreteAxisDivisionMode, endOnTick?: boolean, endValue?: Date | number | string | undefined, holidays?: Array<Date | string> | Array<number> | undefined, label?: { customizeText?: ((scaleValue: { value: Date | number | string, valueText: string }) => string), font?: Font, format?: Format | undefined, overlappingBehavior?: LabelOverlap, topIndent?: number, visible?: boolean }, linearThreshold?: number, logarithmBase?: number, marker?: { label?: { customizeText?: ((markerValue: { value: Date | number, valueText: string }) => string), format?: Format | undefined }, separatorHeight?: number, textLeftIndent?: number, textTopIndent?: number, topIndent?: number, visible?: boolean }, maxRange?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, minorTick?: { color?: string, opacity?: number, visible?: boolean, width?: number }, minorTickCount?: number | undefined, minorTickInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, minRange?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, placeholderHeight?: number | undefined, showCustomBoundaryTicks?: boolean, singleWorkdays?: Array<Date | string> | Array<number> | undefined, startValue?: Date | number | string | undefined, tick?: { color?: string, opacity?: number, width?: number }, tickInterval?: number | TimeInterval | { days?: number, hours?: number, milliseconds?: number, minutes?: number, months?: number, quarters?: number, seconds?: number, weeks?: number, years?: number }, type?: AxisScale | undefined, valueType?: ChartsDataType | undefined, workdaysOnly?: boolean, workWeek?: Array<number> }>;
 
     /**
     
@@ -789,7 +789,7 @@ export class DxRangeSelectorComponent extends DxComponent implements OnDestroy,
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() titleChange: EventEmitter<string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }>;
+    @Output() titleChange: EventEmitter<string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string | undefined, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/scale.ts b/packages/devextreme-angular/src/ui/range-selector/nested/scale.ts
index 7539911000f8..c473dc546b6a 100644
--- a/packages/devextreme-angular/src/ui/range-selector/nested/scale.ts
+++ b/packages/devextreme-angular/src/ui/range-selector/nested/scale.ts
@@ -69,10 +69,10 @@ export class DxoRangeSelectorScaleComponent extends NestedOption implements OnDe
     }
 
     @Input()
-    get breaks(): Array<ScaleBreak> | { endValue?: Date | number | string | undefined, startValue?: Date | number | string | undefined }[] {
+    get breaks(): Array<ScaleBreak> | undefined | { endValue?: Date | number | string | undefined, startValue?: Date | number | string | undefined }[] {
         return this._getOption('breaks');
     }
-    set breaks(value: Array<ScaleBreak> | { endValue?: Date | number | string | undefined, startValue?: Date | number | string | undefined }[]) {
+    set breaks(value: Array<ScaleBreak> | undefined | { endValue?: Date | number | string | undefined, startValue?: Date | number | string | undefined }[]) {
         this._setOption('breaks', value);
     }
 
@@ -117,10 +117,10 @@ export class DxoRangeSelectorScaleComponent extends NestedOption implements OnDe
     }
 
     @Input()
-    get holidays(): Array<Date | string> | Array<number> {
+    get holidays(): Array<Date | string> | Array<number> | undefined {
         return this._getOption('holidays');
     }
-    set holidays(value: Array<Date | string> | Array<number>) {
+    set holidays(value: Array<Date | string> | Array<number> | undefined) {
         this._setOption('holidays', value);
     }
 
@@ -213,10 +213,10 @@ export class DxoRangeSelectorScaleComponent extends NestedOption implements OnDe
     }
 
     @Input()
-    get singleWorkdays(): Array<Date | string> | Array<number> {
+    get singleWorkdays(): Array<Date | string> | Array<number> | undefined {
         return this._getOption('singleWorkdays');
     }
-    set singleWorkdays(value: Array<Date | string> | Array<number>) {
+    set singleWorkdays(value: Array<Date | string> | Array<number> | undefined) {
         this._setOption('singleWorkdays', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/subtitle.ts b/packages/devextreme-angular/src/ui/range-selector/nested/subtitle.ts
index 1f7c64576164..e29376a99b31 100644
--- a/packages/devextreme-angular/src/ui/range-selector/nested/subtitle.ts
+++ b/packages/devextreme-angular/src/ui/range-selector/nested/subtitle.ts
@@ -48,10 +48,10 @@ export class DxoRangeSelectorSubtitleComponent extends NestedOption implements O
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/range-selector/nested/title.ts b/packages/devextreme-angular/src/ui/range-selector/nested/title.ts
index f879fc1a1d65..b3a5c79bef51 100644
--- a/packages/devextreme-angular/src/ui/range-selector/nested/title.ts
+++ b/packages/devextreme-angular/src/ui/range-selector/nested/title.ts
@@ -65,18 +65,18 @@ export class DxoRangeSelectorTitleComponent extends NestedOption implements OnDe
     }
 
     @Input()
-    get subtitle(): string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap } {
+    get subtitle(): string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap } {
         return this._getOption('subtitle');
     }
-    set subtitle(value: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }) {
+    set subtitle(value: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }) {
         this._setOption('subtitle', value);
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/range-slider/index.ts b/packages/devextreme-angular/src/ui/range-slider/index.ts
index 029247e61dcf..fd6c6a6c3c63 100644
--- a/packages/devextreme-angular/src/ui/range-slider/index.ts
+++ b/packages/devextreme-angular/src/ui/range-slider/index.ts
@@ -396,10 +396,10 @@ export class DxRangeSliderComponent extends DxComponent implements OnDestroy, Co
     
      */
     @Input()
-    get validationError(): any {
+    get validationError(): any | null {
         return this._getOption('validationError');
     }
-    set validationError(value: any) {
+    set validationError(value: any | null) {
         this._setOption('validationError', value);
     }
 
@@ -409,10 +409,10 @@ export class DxRangeSliderComponent extends DxComponent implements OnDestroy, Co
     
      */
     @Input()
-    get validationErrors(): Array<any> {
+    get validationErrors(): Array<any> | null {
         return this._getOption('validationErrors');
     }
-    set validationErrors(value: Array<any>) {
+    set validationErrors(value: Array<any> | null) {
         this._setOption('validationErrors', value);
     }
 
@@ -720,14 +720,14 @@ export class DxRangeSliderComponent extends DxComponent implements OnDestroy, Co
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorChange: EventEmitter<any>;
+    @Output() validationErrorChange: EventEmitter<any | null>;
 
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorsChange: EventEmitter<Array<any>>;
+    @Output() validationErrorsChange: EventEmitter<Array<any> | null>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/responsive-box/index.ts b/packages/devextreme-angular/src/ui/responsive-box/index.ts
index c9677de8e8f3..1d0e3a0e49a6 100644
--- a/packages/devextreme-angular/src/ui/responsive-box/index.ts
+++ b/packages/devextreme-angular/src/ui/responsive-box/index.ts
@@ -246,10 +246,10 @@ export class DxResponsiveBoxComponent<TItem = any, TKey = any> extends DxCompone
     
      */
     @Input()
-    get screenByWidth(): Function {
+    get screenByWidth(): Function | undefined {
         return this._getOption('screenByWidth');
     }
-    set screenByWidth(value: Function) {
+    set screenByWidth(value: Function | undefined) {
         this._setOption('screenByWidth', value);
     }
 
@@ -438,7 +438,7 @@ export class DxResponsiveBoxComponent<TItem = any, TKey = any> extends DxCompone
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() screenByWidthChange: EventEmitter<Function>;
+    @Output() screenByWidthChange: EventEmitter<Function | undefined>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/sankey/index.ts b/packages/devextreme-angular/src/ui/sankey/index.ts
index ef0efe8693f8..3e540d5063ce 100644
--- a/packages/devextreme-angular/src/ui/sankey/index.ts
+++ b/packages/devextreme-angular/src/ui/sankey/index.ts
@@ -391,10 +391,10 @@ export class DxSankeyComponent extends DxComponent implements OnDestroy, OnChang
     
      */
     @Input()
-    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap } {
+    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string | undefined, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap } {
         return this._getOption('title');
     }
-    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }) {
+    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string | undefined, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }) {
         this._setOption('title', value);
     }
 
@@ -679,7 +679,7 @@ export class DxSankeyComponent extends DxComponent implements OnDestroy, OnChang
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() titleChange: EventEmitter<string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }>;
+    @Output() titleChange: EventEmitter<string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string | undefined, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/sankey/nested/subtitle.ts b/packages/devextreme-angular/src/ui/sankey/nested/subtitle.ts
index 0e1faadfe844..8825e7877a41 100644
--- a/packages/devextreme-angular/src/ui/sankey/nested/subtitle.ts
+++ b/packages/devextreme-angular/src/ui/sankey/nested/subtitle.ts
@@ -48,10 +48,10 @@ export class DxoSankeySubtitleComponent extends NestedOption implements OnDestro
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/sankey/nested/title.ts b/packages/devextreme-angular/src/ui/sankey/nested/title.ts
index 22e36bd423c6..a8edd1504765 100644
--- a/packages/devextreme-angular/src/ui/sankey/nested/title.ts
+++ b/packages/devextreme-angular/src/ui/sankey/nested/title.ts
@@ -65,18 +65,18 @@ export class DxoSankeyTitleComponent extends NestedOption implements OnDestroy,
     }
 
     @Input()
-    get subtitle(): string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap } {
+    get subtitle(): string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap } {
         return this._getOption('subtitle');
     }
-    set subtitle(value: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }) {
+    set subtitle(value: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }) {
         this._setOption('subtitle', value);
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/scheduler/nested/button-options.ts b/packages/devextreme-angular/src/ui/scheduler/nested/button-options.ts
index 724555b4e7a9..e9e9d804d05e 100644
--- a/packages/devextreme-angular/src/ui/scheduler/nested/button-options.ts
+++ b/packages/devextreme-angular/src/ui/scheduler/nested/button-options.ts
@@ -114,10 +114,10 @@ export class DxoSchedulerButtonOptionsComponent extends NestedOption implements
     }
 
     @Input()
-    get onClick(): ((e: ClickEvent) => void) {
+    get onClick(): ((e: ClickEvent) => void) | undefined {
         return this._getOption('onClick');
     }
-    set onClick(value: ((e: ClickEvent) => void)) {
+    set onClick(value: ((e: ClickEvent) => void) | undefined) {
         this._setOption('onClick', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/scheduler/nested/form.ts b/packages/devextreme-angular/src/ui/scheduler/nested/form.ts
index 1c711da7d438..7747daf6103d 100644
--- a/packages/devextreme-angular/src/ui/scheduler/nested/form.ts
+++ b/packages/devextreme-angular/src/ui/scheduler/nested/form.ts
@@ -232,18 +232,18 @@ export class DxoSchedulerFormComponent extends NestedOption implements OnDestroy
     }
 
     @Input()
-    get onEditorEnterKey(): ((e: EditorEnterKeyEvent) => void) {
+    get onEditorEnterKey(): ((e: EditorEnterKeyEvent) => void) | undefined {
         return this._getOption('onEditorEnterKey');
     }
-    set onEditorEnterKey(value: ((e: EditorEnterKeyEvent) => void)) {
+    set onEditorEnterKey(value: ((e: EditorEnterKeyEvent) => void) | undefined) {
         this._setOption('onEditorEnterKey', value);
     }
 
     @Input()
-    get onFieldDataChanged(): ((e: FieldDataChangedEvent) => void) {
+    get onFieldDataChanged(): ((e: FieldDataChangedEvent) => void) | undefined {
         return this._getOption('onFieldDataChanged');
     }
-    set onFieldDataChanged(value: ((e: FieldDataChangedEvent) => void)) {
+    set onFieldDataChanged(value: ((e: FieldDataChangedEvent) => void) | undefined) {
         this._setOption('onFieldDataChanged', value);
     }
 
@@ -264,18 +264,18 @@ export class DxoSchedulerFormComponent extends NestedOption implements OnDestroy
     }
 
     @Input()
-    get onSmartPasted(): ((e: SmartPastedEvent) => void) {
+    get onSmartPasted(): ((e: SmartPastedEvent) => void) | undefined {
         return this._getOption('onSmartPasted');
     }
-    set onSmartPasted(value: ((e: SmartPastedEvent) => void)) {
+    set onSmartPasted(value: ((e: SmartPastedEvent) => void) | undefined) {
         this._setOption('onSmartPasted', value);
     }
 
     @Input()
-    get onSmartPasting(): ((e: SmartPastingEvent) => void) {
+    get onSmartPasting(): ((e: SmartPastingEvent) => void) | undefined {
         return this._getOption('onSmartPasting');
     }
-    set onSmartPasting(value: ((e: SmartPastingEvent) => void)) {
+    set onSmartPasting(value: ((e: SmartPastingEvent) => void) | undefined) {
         this._setOption('onSmartPasting', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/scheduler/nested/options.ts b/packages/devextreme-angular/src/ui/scheduler/nested/options.ts
index 84e1fbfc4653..23266f3b4e18 100644
--- a/packages/devextreme-angular/src/ui/scheduler/nested/options.ts
+++ b/packages/devextreme-angular/src/ui/scheduler/nested/options.ts
@@ -159,10 +159,10 @@ export class DxoSchedulerOptionsComponent extends NestedOption implements OnDest
     }
 
     @Input()
-    get onItemClick(): ((e: ItemClickEvent) => void) {
+    get onItemClick(): ((e: ItemClickEvent) => void) | undefined {
         return this._getOption('onItemClick');
     }
-    set onItemClick(value: ((e: ItemClickEvent) => void)) {
+    set onItemClick(value: ((e: ItemClickEvent) => void) | undefined) {
         this._setOption('onItemClick', value);
     }
 
@@ -175,10 +175,10 @@ export class DxoSchedulerOptionsComponent extends NestedOption implements OnDest
     }
 
     @Input()
-    get onSelectionChanged(): ((e: SelectionChangedEvent) => void) {
+    get onSelectionChanged(): ((e: SelectionChangedEvent) => void) | undefined {
         return this._getOption('onSelectionChanged');
     }
-    set onSelectionChanged(value: ((e: SelectionChangedEvent) => void)) {
+    set onSelectionChanged(value: ((e: SelectionChangedEvent) => void) | undefined) {
         this._setOption('onSelectionChanged', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/scheduler/nested/tab-panel-options.ts b/packages/devextreme-angular/src/ui/scheduler/nested/tab-panel-options.ts
index 15da4a0a51cf..07ee7ab81a9f 100644
--- a/packages/devextreme-angular/src/ui/scheduler/nested/tab-panel-options.ts
+++ b/packages/devextreme-angular/src/ui/scheduler/nested/tab-panel-options.ts
@@ -288,18 +288,18 @@ export class DxoSchedulerTabPanelOptionsComponent extends NestedOption implement
     }
 
     @Input()
-    get onTitleHold(): ((e: TitleHoldEvent) => void) {
+    get onTitleHold(): ((e: TitleHoldEvent) => void) | undefined {
         return this._getOption('onTitleHold');
     }
-    set onTitleHold(value: ((e: TitleHoldEvent) => void)) {
+    set onTitleHold(value: ((e: TitleHoldEvent) => void) | undefined) {
         this._setOption('onTitleHold', value);
     }
 
     @Input()
-    get onTitleRendered(): ((e: TitleRenderedEvent) => void) {
+    get onTitleRendered(): ((e: TitleRenderedEvent) => void) | undefined {
         return this._getOption('onTitleRendered');
     }
-    set onTitleRendered(value: ((e: TitleRenderedEvent) => void)) {
+    set onTitleRendered(value: ((e: TitleRenderedEvent) => void) | undefined) {
         this._setOption('onTitleRendered', value);
     }
 
@@ -344,10 +344,10 @@ export class DxoSchedulerTabPanelOptionsComponent extends NestedOption implement
     }
 
     @Input()
-    get selectedItem(): any {
+    get selectedItem(): any | null {
         return this._getOption('selectedItem');
     }
-    set selectedItem(value: any) {
+    set selectedItem(value: any | null) {
         this._setOption('selectedItem', value);
     }
 
@@ -427,7 +427,7 @@ export class DxoSchedulerTabPanelOptionsComponent extends NestedOption implement
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() selectedItemChange: EventEmitter<any>;
+    @Output() selectedItemChange: EventEmitter<any | null>;
     protected get _optionPath() {
         return 'tabPanelOptions';
     }
diff --git a/packages/devextreme-angular/src/ui/select-box/index.ts b/packages/devextreme-angular/src/ui/select-box/index.ts
index 5ec9214cfc6c..aa437613d6f1 100644
--- a/packages/devextreme-angular/src/ui/select-box/index.ts
+++ b/packages/devextreme-angular/src/ui/select-box/index.ts
@@ -176,10 +176,10 @@ export class DxSelectBoxComponent extends DxComponent implements OnDestroy, Cont
     
      */
     @Input()
-    get buttons(): Array<DropDownPredefinedButton | TextEditorButton> {
+    get buttons(): Array<DropDownPredefinedButton | TextEditorButton> | undefined {
         return this._getOption('buttons');
     }
-    set buttons(value: Array<DropDownPredefinedButton | TextEditorButton>) {
+    set buttons(value: Array<DropDownPredefinedButton | TextEditorButton> | undefined) {
         this._setOption('buttons', value);
     }
 
@@ -503,10 +503,10 @@ export class DxSelectBoxComponent extends DxComponent implements OnDestroy, Cont
     
      */
     @Input()
-    get maxLength(): number | string {
+    get maxLength(): null | number | string {
         return this._getOption('maxLength');
     }
-    set maxLength(value: number | string) {
+    set maxLength(value: null | number | string) {
         this._setOption('maxLength', value);
     }
 
@@ -672,10 +672,10 @@ export class DxSelectBoxComponent extends DxComponent implements OnDestroy, Cont
     
      */
     @Input()
-    get selectedItem(): any {
+    get selectedItem(): any | null {
         return this._getOption('selectedItem');
     }
-    set selectedItem(value: any) {
+    set selectedItem(value: any | null) {
         this._setOption('selectedItem', value);
     }
 
@@ -802,10 +802,10 @@ export class DxSelectBoxComponent extends DxComponent implements OnDestroy, Cont
     
      */
     @Input()
-    get validationError(): any {
+    get validationError(): any | null {
         return this._getOption('validationError');
     }
-    set validationError(value: any) {
+    set validationError(value: any | null) {
         this._setOption('validationError', value);
     }
 
@@ -815,10 +815,10 @@ export class DxSelectBoxComponent extends DxComponent implements OnDestroy, Cont
     
      */
     @Input()
-    get validationErrors(): Array<any> {
+    get validationErrors(): Array<any> | null {
         return this._getOption('validationErrors');
     }
-    set validationErrors(value: Array<any>) {
+    set validationErrors(value: Array<any> | null) {
         this._setOption('validationErrors', value);
     }
 
@@ -1125,7 +1125,7 @@ export class DxSelectBoxComponent extends DxComponent implements OnDestroy, Cont
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() buttonsChange: EventEmitter<Array<DropDownPredefinedButton | TextEditorButton>>;
+    @Output() buttonsChange: EventEmitter<Array<DropDownPredefinedButton | TextEditorButton> | undefined>;
 
     /**
     
@@ -1300,7 +1300,7 @@ export class DxSelectBoxComponent extends DxComponent implements OnDestroy, Cont
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() maxLengthChange: EventEmitter<number | string>;
+    @Output() maxLengthChange: EventEmitter<null | number | string>;
 
     /**
     
@@ -1391,7 +1391,7 @@ export class DxSelectBoxComponent extends DxComponent implements OnDestroy, Cont
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() selectedItemChange: EventEmitter<any>;
+    @Output() selectedItemChange: EventEmitter<any | null>;
 
     /**
     
@@ -1461,14 +1461,14 @@ export class DxSelectBoxComponent extends DxComponent implements OnDestroy, Cont
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorChange: EventEmitter<any>;
+    @Output() validationErrorChange: EventEmitter<any | null>;
 
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorsChange: EventEmitter<Array<any>>;
+    @Output() validationErrorsChange: EventEmitter<Array<any> | null>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/select-box/nested/drop-down-options.ts b/packages/devextreme-angular/src/ui/select-box/nested/drop-down-options.ts
index 014d9ec745a3..d9c39e668dee 100644
--- a/packages/devextreme-angular/src/ui/select-box/nested/drop-down-options.ts
+++ b/packages/devextreme-angular/src/ui/select-box/nested/drop-down-options.ts
@@ -220,18 +220,18 @@ export class DxoSelectBoxDropDownOptionsComponent extends NestedOption implement
     }
 
     @Input()
-    get onContentReady(): ((e: EventInfo<any>) => void) {
+    get onContentReady(): ((e: EventInfo<any>) => void) | undefined {
         return this._getOption('onContentReady');
     }
-    set onContentReady(value: ((e: EventInfo<any>) => void)) {
+    set onContentReady(value: ((e: EventInfo<any>) => void) | undefined) {
         this._setOption('onContentReady', value);
     }
 
     @Input()
-    get onDisposing(): ((e: EventInfo<any>) => void) {
+    get onDisposing(): ((e: EventInfo<any>) => void) | undefined {
         return this._getOption('onDisposing');
     }
-    set onDisposing(value: ((e: EventInfo<any>) => void)) {
+    set onDisposing(value: ((e: EventInfo<any>) => void) | undefined) {
         this._setOption('onDisposing', value);
     }
 
@@ -252,42 +252,42 @@ export class DxoSelectBoxDropDownOptionsComponent extends NestedOption implement
     }
 
     @Input()
-    get onInitialized(): ((e: { component: CoreComponent<any>, element: any }) => void) {
+    get onInitialized(): ((e: { component: CoreComponent<any>, element: any }) => void) | undefined {
         return this._getOption('onInitialized');
     }
-    set onInitialized(value: ((e: { component: CoreComponent<any>, element: any }) => void)) {
+    set onInitialized(value: ((e: { component: CoreComponent<any>, element: any }) => void) | undefined) {
         this._setOption('onInitialized', value);
     }
 
     @Input()
-    get onOptionChanged(): ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) {
+    get onOptionChanged(): ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) | undefined {
         return this._getOption('onOptionChanged');
     }
-    set onOptionChanged(value: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void)) {
+    set onOptionChanged(value: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) | undefined) {
         this._setOption('onOptionChanged', value);
     }
 
     @Input()
-    get onResize(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) {
+    get onResize(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined {
         return this._getOption('onResize');
     }
-    set onResize(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)) {
+    set onResize(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined) {
         this._setOption('onResize', value);
     }
 
     @Input()
-    get onResizeEnd(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) {
+    get onResizeEnd(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined {
         return this._getOption('onResizeEnd');
     }
-    set onResizeEnd(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)) {
+    set onResizeEnd(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined) {
         this._setOption('onResizeEnd', value);
     }
 
     @Input()
-    get onResizeStart(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) {
+    get onResizeStart(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined {
         return this._getOption('onResizeStart');
     }
-    set onResizeStart(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)) {
+    set onResizeStart(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined) {
         this._setOption('onResizeStart', value);
     }
 
@@ -308,10 +308,10 @@ export class DxoSelectBoxDropDownOptionsComponent extends NestedOption implement
     }
 
     @Input()
-    get onTitleRendered(): ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) {
+    get onTitleRendered(): ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) | undefined {
         return this._getOption('onTitleRendered');
     }
-    set onTitleRendered(value: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void)) {
+    set onTitleRendered(value: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) | undefined) {
         this._setOption('onTitleRendered', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/select-box/nested/options.ts b/packages/devextreme-angular/src/ui/select-box/nested/options.ts
index 44e79abbb397..1273c472f31a 100644
--- a/packages/devextreme-angular/src/ui/select-box/nested/options.ts
+++ b/packages/devextreme-angular/src/ui/select-box/nested/options.ts
@@ -114,10 +114,10 @@ export class DxoSelectBoxOptionsComponent extends NestedOption implements AfterV
     }
 
     @Input()
-    get onClick(): ((e: ClickEvent) => void) {
+    get onClick(): ((e: ClickEvent) => void) | undefined {
         return this._getOption('onClick');
     }
-    set onClick(value: ((e: ClickEvent) => void)) {
+    set onClick(value: ((e: ClickEvent) => void) | undefined) {
         this._setOption('onClick', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/slider/index.ts b/packages/devextreme-angular/src/ui/slider/index.ts
index 8b465d1f60af..10ceb63346d8 100644
--- a/packages/devextreme-angular/src/ui/slider/index.ts
+++ b/packages/devextreme-angular/src/ui/slider/index.ts
@@ -357,10 +357,10 @@ export class DxSliderComponent extends DxComponent implements OnDestroy, Control
     
      */
     @Input()
-    get validationError(): any {
+    get validationError(): any | null {
         return this._getOption('validationError');
     }
-    set validationError(value: any) {
+    set validationError(value: any | null) {
         this._setOption('validationError', value);
     }
 
@@ -370,10 +370,10 @@ export class DxSliderComponent extends DxComponent implements OnDestroy, Control
     
      */
     @Input()
-    get validationErrors(): Array<any> {
+    get validationErrors(): Array<any> | null {
         return this._getOption('validationErrors');
     }
-    set validationErrors(value: Array<any>) {
+    set validationErrors(value: Array<any> | null) {
         this._setOption('validationErrors', value);
     }
 
@@ -660,14 +660,14 @@ export class DxSliderComponent extends DxComponent implements OnDestroy, Control
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorChange: EventEmitter<any>;
+    @Output() validationErrorChange: EventEmitter<any | null>;
 
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorsChange: EventEmitter<Array<any>>;
+    @Output() validationErrorsChange: EventEmitter<Array<any> | null>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/stepper/index.ts b/packages/devextreme-angular/src/ui/stepper/index.ts
index fdf1c9b1f660..66902afd4c6a 100644
--- a/packages/devextreme-angular/src/ui/stepper/index.ts
+++ b/packages/devextreme-angular/src/ui/stepper/index.ts
@@ -223,10 +223,10 @@ export class DxStepperComponent<TItem = any, TKey = any> extends DxComponent imp
 
     
     @Input()
-    get selectedItem(): any {
+    get selectedItem(): any | null {
         return this._getOption('selectedItem');
     }
-    set selectedItem(value: any) {
+    set selectedItem(value: any | null) {
         this._setOption('selectedItem', value);
     }
 
@@ -444,7 +444,7 @@ export class DxStepperComponent<TItem = any, TKey = any> extends DxComponent imp
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() selectedItemChange: EventEmitter<any>;
+    @Output() selectedItemChange: EventEmitter<any | null>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/switch/index.ts b/packages/devextreme-angular/src/ui/switch/index.ts
index 12fb8ad79d80..897700d841bb 100644
--- a/packages/devextreme-angular/src/ui/switch/index.ts
+++ b/packages/devextreme-angular/src/ui/switch/index.ts
@@ -285,10 +285,10 @@ export class DxSwitchComponent extends DxComponent implements OnDestroy, Control
     
      */
     @Input()
-    get validationError(): any {
+    get validationError(): any | null {
         return this._getOption('validationError');
     }
-    set validationError(value: any) {
+    set validationError(value: any | null) {
         this._setOption('validationError', value);
     }
 
@@ -298,10 +298,10 @@ export class DxSwitchComponent extends DxComponent implements OnDestroy, Control
     
      */
     @Input()
-    get validationErrors(): Array<any> {
+    get validationErrors(): Array<any> | null {
         return this._getOption('validationErrors');
     }
-    set validationErrors(value: Array<any>) {
+    set validationErrors(value: Array<any> | null) {
         this._setOption('validationErrors', value);
     }
 
@@ -540,14 +540,14 @@ export class DxSwitchComponent extends DxComponent implements OnDestroy, Control
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorChange: EventEmitter<any>;
+    @Output() validationErrorChange: EventEmitter<any | null>;
 
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorsChange: EventEmitter<Array<any>>;
+    @Output() validationErrorsChange: EventEmitter<Array<any> | null>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/tab-panel/index.ts b/packages/devextreme-angular/src/ui/tab-panel/index.ts
index 029969f1066c..bfd9b86a9c8e 100644
--- a/packages/devextreme-angular/src/ui/tab-panel/index.ts
+++ b/packages/devextreme-angular/src/ui/tab-panel/index.ts
@@ -392,10 +392,10 @@ export class DxTabPanelComponent<TItem = any, TKey = any> extends DxComponent im
     
      */
     @Input()
-    get selectedItem(): any {
+    get selectedItem(): any | null {
         return this._getOption('selectedItem');
     }
-    set selectedItem(value: any) {
+    set selectedItem(value: any | null) {
         this._setOption('selectedItem', value);
     }
 
@@ -767,7 +767,7 @@ export class DxTabPanelComponent<TItem = any, TKey = any> extends DxComponent im
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() selectedItemChange: EventEmitter<any>;
+    @Output() selectedItemChange: EventEmitter<any | null>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/tabs/index.ts b/packages/devextreme-angular/src/ui/tabs/index.ts
index 4d5a2a56ee57..6e3b4cd22bab 100644
--- a/packages/devextreme-angular/src/ui/tabs/index.ts
+++ b/packages/devextreme-angular/src/ui/tabs/index.ts
@@ -236,10 +236,10 @@ export class DxTabsComponent<TItem = any, TKey = any> extends DxComponent implem
     
      */
     @Input()
-    get keyExpr(): ((item: any) => any) | string {
+    get keyExpr(): ((item: any) => any) | null | string {
         return this._getOption('keyExpr');
     }
-    set keyExpr(value: ((item: any) => any) | string) {
+    set keyExpr(value: ((item: any) => any) | null | string) {
         this._setOption('keyExpr', value);
     }
 
@@ -340,10 +340,10 @@ export class DxTabsComponent<TItem = any, TKey = any> extends DxComponent implem
     
      */
     @Input()
-    get selectedItem(): any {
+    get selectedItem(): any | null {
         return this._getOption('selectedItem');
     }
-    set selectedItem(value: any) {
+    set selectedItem(value: any | null) {
         this._setOption('selectedItem', value);
     }
 
@@ -620,7 +620,7 @@ export class DxTabsComponent<TItem = any, TKey = any> extends DxComponent implem
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() keyExprChange: EventEmitter<((item: any) => any) | string>;
+    @Output() keyExprChange: EventEmitter<((item: any) => any) | null | string>;
 
     /**
     
@@ -676,7 +676,7 @@ export class DxTabsComponent<TItem = any, TKey = any> extends DxComponent implem
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() selectedItemChange: EventEmitter<any>;
+    @Output() selectedItemChange: EventEmitter<any | null>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/tag-box/index.ts b/packages/devextreme-angular/src/ui/tag-box/index.ts
index e65c2ca41cc4..b698e04d2011 100644
--- a/packages/devextreme-angular/src/ui/tag-box/index.ts
+++ b/packages/devextreme-angular/src/ui/tag-box/index.ts
@@ -189,10 +189,10 @@ export class DxTagBoxComponent extends DxComponent implements OnDestroy, Control
     
      */
     @Input()
-    get buttons(): Array<DropDownPredefinedButton | TextEditorButton> {
+    get buttons(): Array<DropDownPredefinedButton | TextEditorButton> | undefined {
         return this._getOption('buttons');
     }
-    set buttons(value: Array<DropDownPredefinedButton | TextEditorButton>) {
+    set buttons(value: Array<DropDownPredefinedButton | TextEditorButton> | undefined) {
         this._setOption('buttons', value);
     }
 
@@ -542,10 +542,10 @@ export class DxTagBoxComponent extends DxComponent implements OnDestroy, Control
     
      */
     @Input()
-    get maxLength(): number | string {
+    get maxLength(): null | number | string {
         return this._getOption('maxLength');
     }
-    set maxLength(value: number | string) {
+    set maxLength(value: null | number | string) {
         this._setOption('maxLength', value);
     }
 
@@ -893,10 +893,10 @@ export class DxTagBoxComponent extends DxComponent implements OnDestroy, Control
     
      */
     @Input()
-    get validationError(): any {
+    get validationError(): any | null {
         return this._getOption('validationError');
     }
-    set validationError(value: any) {
+    set validationError(value: any | null) {
         this._setOption('validationError', value);
     }
 
@@ -906,10 +906,10 @@ export class DxTagBoxComponent extends DxComponent implements OnDestroy, Control
     
      */
     @Input()
-    get validationErrors(): Array<any> {
+    get validationErrors(): Array<any> | null {
         return this._getOption('validationErrors');
     }
-    set validationErrors(value: Array<any>) {
+    set validationErrors(value: Array<any> | null) {
         this._setOption('validationErrors', value);
     }
 
@@ -1215,7 +1215,7 @@ export class DxTagBoxComponent extends DxComponent implements OnDestroy, Control
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() buttonsChange: EventEmitter<Array<DropDownPredefinedButton | TextEditorButton>>;
+    @Output() buttonsChange: EventEmitter<Array<DropDownPredefinedButton | TextEditorButton> | undefined>;
 
     /**
     
@@ -1404,7 +1404,7 @@ export class DxTagBoxComponent extends DxComponent implements OnDestroy, Control
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() maxLengthChange: EventEmitter<number | string>;
+    @Output() maxLengthChange: EventEmitter<null | number | string>;
 
     /**
     
@@ -1593,14 +1593,14 @@ export class DxTagBoxComponent extends DxComponent implements OnDestroy, Control
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorChange: EventEmitter<any>;
+    @Output() validationErrorChange: EventEmitter<any | null>;
 
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorsChange: EventEmitter<Array<any>>;
+    @Output() validationErrorsChange: EventEmitter<Array<any> | null>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/tag-box/nested/drop-down-options.ts b/packages/devextreme-angular/src/ui/tag-box/nested/drop-down-options.ts
index 1d82c4b4ad6a..235f1bbefb48 100644
--- a/packages/devextreme-angular/src/ui/tag-box/nested/drop-down-options.ts
+++ b/packages/devextreme-angular/src/ui/tag-box/nested/drop-down-options.ts
@@ -220,18 +220,18 @@ export class DxoTagBoxDropDownOptionsComponent extends NestedOption implements O
     }
 
     @Input()
-    get onContentReady(): ((e: EventInfo<any>) => void) {
+    get onContentReady(): ((e: EventInfo<any>) => void) | undefined {
         return this._getOption('onContentReady');
     }
-    set onContentReady(value: ((e: EventInfo<any>) => void)) {
+    set onContentReady(value: ((e: EventInfo<any>) => void) | undefined) {
         this._setOption('onContentReady', value);
     }
 
     @Input()
-    get onDisposing(): ((e: EventInfo<any>) => void) {
+    get onDisposing(): ((e: EventInfo<any>) => void) | undefined {
         return this._getOption('onDisposing');
     }
-    set onDisposing(value: ((e: EventInfo<any>) => void)) {
+    set onDisposing(value: ((e: EventInfo<any>) => void) | undefined) {
         this._setOption('onDisposing', value);
     }
 
@@ -252,42 +252,42 @@ export class DxoTagBoxDropDownOptionsComponent extends NestedOption implements O
     }
 
     @Input()
-    get onInitialized(): ((e: { component: CoreComponent<any>, element: any }) => void) {
+    get onInitialized(): ((e: { component: CoreComponent<any>, element: any }) => void) | undefined {
         return this._getOption('onInitialized');
     }
-    set onInitialized(value: ((e: { component: CoreComponent<any>, element: any }) => void)) {
+    set onInitialized(value: ((e: { component: CoreComponent<any>, element: any }) => void) | undefined) {
         this._setOption('onInitialized', value);
     }
 
     @Input()
-    get onOptionChanged(): ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) {
+    get onOptionChanged(): ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) | undefined {
         return this._getOption('onOptionChanged');
     }
-    set onOptionChanged(value: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void)) {
+    set onOptionChanged(value: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) | undefined) {
         this._setOption('onOptionChanged', value);
     }
 
     @Input()
-    get onResize(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) {
+    get onResize(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined {
         return this._getOption('onResize');
     }
-    set onResize(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)) {
+    set onResize(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined) {
         this._setOption('onResize', value);
     }
 
     @Input()
-    get onResizeEnd(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) {
+    get onResizeEnd(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined {
         return this._getOption('onResizeEnd');
     }
-    set onResizeEnd(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)) {
+    set onResizeEnd(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined) {
         this._setOption('onResizeEnd', value);
     }
 
     @Input()
-    get onResizeStart(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) {
+    get onResizeStart(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined {
         return this._getOption('onResizeStart');
     }
-    set onResizeStart(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)) {
+    set onResizeStart(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined) {
         this._setOption('onResizeStart', value);
     }
 
@@ -308,10 +308,10 @@ export class DxoTagBoxDropDownOptionsComponent extends NestedOption implements O
     }
 
     @Input()
-    get onTitleRendered(): ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) {
+    get onTitleRendered(): ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) | undefined {
         return this._getOption('onTitleRendered');
     }
-    set onTitleRendered(value: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void)) {
+    set onTitleRendered(value: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) | undefined) {
         this._setOption('onTitleRendered', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/tag-box/nested/options.ts b/packages/devextreme-angular/src/ui/tag-box/nested/options.ts
index 998c6f269897..19c64ca6ab1a 100644
--- a/packages/devextreme-angular/src/ui/tag-box/nested/options.ts
+++ b/packages/devextreme-angular/src/ui/tag-box/nested/options.ts
@@ -114,10 +114,10 @@ export class DxoTagBoxOptionsComponent extends NestedOption implements AfterView
     }
 
     @Input()
-    get onClick(): ((e: ClickEvent) => void) {
+    get onClick(): ((e: ClickEvent) => void) | undefined {
         return this._getOption('onClick');
     }
-    set onClick(value: ((e: ClickEvent) => void)) {
+    set onClick(value: ((e: ClickEvent) => void) | undefined) {
         this._setOption('onClick', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/text-area/index.ts b/packages/devextreme-angular/src/ui/text-area/index.ts
index f3f56fca396c..87705ec083b1 100644
--- a/packages/devextreme-angular/src/ui/text-area/index.ts
+++ b/packages/devextreme-angular/src/ui/text-area/index.ts
@@ -272,10 +272,10 @@ export class DxTextAreaComponent extends DxComponent implements OnDestroy, Contr
     
      */
     @Input()
-    get maxLength(): number | string {
+    get maxLength(): null | number | string {
         return this._getOption('maxLength');
     }
-    set maxLength(value: number | string) {
+    set maxLength(value: null | number | string) {
         this._setOption('maxLength', value);
     }
 
@@ -402,10 +402,10 @@ export class DxTextAreaComponent extends DxComponent implements OnDestroy, Contr
     
      */
     @Input()
-    get validationError(): any {
+    get validationError(): any | null {
         return this._getOption('validationError');
     }
-    set validationError(value: any) {
+    set validationError(value: any | null) {
         this._setOption('validationError', value);
     }
 
@@ -415,10 +415,10 @@ export class DxTextAreaComponent extends DxComponent implements OnDestroy, Contr
     
      */
     @Input()
-    get validationErrors(): Array<any> {
+    get validationErrors(): Array<any> | null {
         return this._getOption('validationErrors');
     }
-    set validationErrors(value: Array<any>) {
+    set validationErrors(value: Array<any> | null) {
         this._setOption('validationErrors', value);
     }
 
@@ -743,7 +743,7 @@ export class DxTextAreaComponent extends DxComponent implements OnDestroy, Contr
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() maxLengthChange: EventEmitter<number | string>;
+    @Output() maxLengthChange: EventEmitter<null | number | string>;
 
     /**
     
@@ -813,14 +813,14 @@ export class DxTextAreaComponent extends DxComponent implements OnDestroy, Contr
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorChange: EventEmitter<any>;
+    @Output() validationErrorChange: EventEmitter<any | null>;
 
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorsChange: EventEmitter<Array<any>>;
+    @Output() validationErrorsChange: EventEmitter<Array<any> | null>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/text-box/index.ts b/packages/devextreme-angular/src/ui/text-box/index.ts
index dc80a935d21f..39585c65e967 100644
--- a/packages/devextreme-angular/src/ui/text-box/index.ts
+++ b/packages/devextreme-angular/src/ui/text-box/index.ts
@@ -118,10 +118,10 @@ export class DxTextBoxComponent extends DxComponent implements OnDestroy, Contro
     
      */
     @Input()
-    get buttons(): Array<string | TextBoxPredefinedButton | TextEditorButton> {
+    get buttons(): Array<string | TextBoxPredefinedButton | TextEditorButton> | undefined {
         return this._getOption('buttons');
     }
-    set buttons(value: Array<string | TextBoxPredefinedButton | TextEditorButton>) {
+    set buttons(value: Array<string | TextBoxPredefinedButton | TextEditorButton> | undefined) {
         this._setOption('buttons', value);
     }
 
@@ -326,10 +326,10 @@ export class DxTextBoxComponent extends DxComponent implements OnDestroy, Contro
     
      */
     @Input()
-    get maxLength(): number | string {
+    get maxLength(): null | number | string {
         return this._getOption('maxLength');
     }
-    set maxLength(value: number | string) {
+    set maxLength(value: null | number | string) {
         this._setOption('maxLength', value);
     }
 
@@ -495,10 +495,10 @@ export class DxTextBoxComponent extends DxComponent implements OnDestroy, Contro
     
      */
     @Input()
-    get validationError(): any {
+    get validationError(): any | null {
         return this._getOption('validationError');
     }
-    set validationError(value: any) {
+    set validationError(value: any | null) {
         this._setOption('validationError', value);
     }
 
@@ -508,10 +508,10 @@ export class DxTextBoxComponent extends DxComponent implements OnDestroy, Contro
     
      */
     @Input()
-    get validationErrors(): Array<any> {
+    get validationErrors(): Array<any> | null {
         return this._getOption('validationErrors');
     }
-    set validationErrors(value: Array<any>) {
+    set validationErrors(value: Array<any> | null) {
         this._setOption('validationErrors', value);
     }
 
@@ -745,7 +745,7 @@ export class DxTextBoxComponent extends DxComponent implements OnDestroy, Contro
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() buttonsChange: EventEmitter<Array<string | TextBoxPredefinedButton | TextEditorButton>>;
+    @Output() buttonsChange: EventEmitter<Array<string | TextBoxPredefinedButton | TextEditorButton> | undefined>;
 
     /**
     
@@ -857,7 +857,7 @@ export class DxTextBoxComponent extends DxComponent implements OnDestroy, Contro
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() maxLengthChange: EventEmitter<number | string>;
+    @Output() maxLengthChange: EventEmitter<null | number | string>;
 
     /**
     
@@ -948,14 +948,14 @@ export class DxTextBoxComponent extends DxComponent implements OnDestroy, Contro
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorChange: EventEmitter<any>;
+    @Output() validationErrorChange: EventEmitter<any | null>;
 
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() validationErrorsChange: EventEmitter<Array<any>>;
+    @Output() validationErrorsChange: EventEmitter<Array<any> | null>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/text-box/nested/options.ts b/packages/devextreme-angular/src/ui/text-box/nested/options.ts
index 77a9192393e6..3ad00a5fb1ec 100644
--- a/packages/devextreme-angular/src/ui/text-box/nested/options.ts
+++ b/packages/devextreme-angular/src/ui/text-box/nested/options.ts
@@ -114,10 +114,10 @@ export class DxoTextBoxOptionsComponent extends NestedOption implements AfterVie
     }
 
     @Input()
-    get onClick(): ((e: ClickEvent) => void) {
+    get onClick(): ((e: ClickEvent) => void) | undefined {
         return this._getOption('onClick');
     }
-    set onClick(value: ((e: ClickEvent) => void)) {
+    set onClick(value: ((e: ClickEvent) => void) | undefined) {
         this._setOption('onClick', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/button-options.ts b/packages/devextreme-angular/src/ui/tree-list/nested/button-options.ts
index d3779c2b62f6..2f2a6733855e 100644
--- a/packages/devextreme-angular/src/ui/tree-list/nested/button-options.ts
+++ b/packages/devextreme-angular/src/ui/tree-list/nested/button-options.ts
@@ -114,10 +114,10 @@ export class DxoTreeListButtonOptionsComponent extends NestedOption implements A
     }
 
     @Input()
-    get onClick(): ((e: ClickEvent) => void) {
+    get onClick(): ((e: ClickEvent) => void) | undefined {
         return this._getOption('onClick');
     }
-    set onClick(value: ((e: ClickEvent) => void)) {
+    set onClick(value: ((e: ClickEvent) => void) | undefined) {
         this._setOption('onClick', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/editor-options.ts b/packages/devextreme-angular/src/ui/tree-list/nested/editor-options.ts
index e0e170322d1e..1caaf3f74016 100644
--- a/packages/devextreme-angular/src/ui/tree-list/nested/editor-options.ts
+++ b/packages/devextreme-angular/src/ui/tree-list/nested/editor-options.ts
@@ -62,10 +62,10 @@ export class DxoTreeListEditorOptionsComponent extends NestedOption implements O
     }
 
     @Input()
-    get buttons(): Array<string | TextBoxPredefinedButton | TextEditorButton> {
+    get buttons(): Array<string | TextBoxPredefinedButton | TextEditorButton> | undefined {
         return this._getOption('buttons');
     }
-    set buttons(value: Array<string | TextBoxPredefinedButton | TextEditorButton>) {
+    set buttons(value: Array<string | TextBoxPredefinedButton | TextEditorButton> | undefined) {
         this._setOption('buttons', value);
     }
 
@@ -190,10 +190,10 @@ export class DxoTreeListEditorOptionsComponent extends NestedOption implements O
     }
 
     @Input()
-    get maxLength(): number | string {
+    get maxLength(): null | number | string {
         return this._getOption('maxLength');
     }
-    set maxLength(value: number | string) {
+    set maxLength(value: null | number | string) {
         this._setOption('maxLength', value);
     }
 
@@ -414,18 +414,18 @@ export class DxoTreeListEditorOptionsComponent extends NestedOption implements O
     }
 
     @Input()
-    get validationError(): any {
+    get validationError(): any | null {
         return this._getOption('validationError');
     }
-    set validationError(value: any) {
+    set validationError(value: any | null) {
         this._setOption('validationError', value);
     }
 
     @Input()
-    get validationErrors(): Array<any> {
+    get validationErrors(): Array<any> | null {
         return this._getOption('validationErrors');
     }
-    set validationErrors(value: Array<any>) {
+    set validationErrors(value: Array<any> | null) {
         this._setOption('validationErrors', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/filter-builder-popup.ts b/packages/devextreme-angular/src/ui/tree-list/nested/filter-builder-popup.ts
index 05cd8c43b18a..148c8fad9e0e 100644
--- a/packages/devextreme-angular/src/ui/tree-list/nested/filter-builder-popup.ts
+++ b/packages/devextreme-angular/src/ui/tree-list/nested/filter-builder-popup.ts
@@ -220,18 +220,18 @@ export class DxoTreeListFilterBuilderPopupComponent extends NestedOption impleme
     }
 
     @Input()
-    get onContentReady(): ((e: EventInfo<any>) => void) {
+    get onContentReady(): ((e: EventInfo<any>) => void) | undefined {
         return this._getOption('onContentReady');
     }
-    set onContentReady(value: ((e: EventInfo<any>) => void)) {
+    set onContentReady(value: ((e: EventInfo<any>) => void) | undefined) {
         this._setOption('onContentReady', value);
     }
 
     @Input()
-    get onDisposing(): ((e: EventInfo<any>) => void) {
+    get onDisposing(): ((e: EventInfo<any>) => void) | undefined {
         return this._getOption('onDisposing');
     }
-    set onDisposing(value: ((e: EventInfo<any>) => void)) {
+    set onDisposing(value: ((e: EventInfo<any>) => void) | undefined) {
         this._setOption('onDisposing', value);
     }
 
@@ -252,42 +252,42 @@ export class DxoTreeListFilterBuilderPopupComponent extends NestedOption impleme
     }
 
     @Input()
-    get onInitialized(): ((e: { component: CoreComponent<any>, element: any }) => void) {
+    get onInitialized(): ((e: { component: CoreComponent<any>, element: any }) => void) | undefined {
         return this._getOption('onInitialized');
     }
-    set onInitialized(value: ((e: { component: CoreComponent<any>, element: any }) => void)) {
+    set onInitialized(value: ((e: { component: CoreComponent<any>, element: any }) => void) | undefined) {
         this._setOption('onInitialized', value);
     }
 
     @Input()
-    get onOptionChanged(): ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) {
+    get onOptionChanged(): ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) | undefined {
         return this._getOption('onOptionChanged');
     }
-    set onOptionChanged(value: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void)) {
+    set onOptionChanged(value: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) | undefined) {
         this._setOption('onOptionChanged', value);
     }
 
     @Input()
-    get onResize(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) {
+    get onResize(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined {
         return this._getOption('onResize');
     }
-    set onResize(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)) {
+    set onResize(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined) {
         this._setOption('onResize', value);
     }
 
     @Input()
-    get onResizeEnd(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) {
+    get onResizeEnd(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined {
         return this._getOption('onResizeEnd');
     }
-    set onResizeEnd(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)) {
+    set onResizeEnd(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined) {
         this._setOption('onResizeEnd', value);
     }
 
     @Input()
-    get onResizeStart(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) {
+    get onResizeStart(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined {
         return this._getOption('onResizeStart');
     }
-    set onResizeStart(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)) {
+    set onResizeStart(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined) {
         this._setOption('onResizeStart', value);
     }
 
@@ -308,10 +308,10 @@ export class DxoTreeListFilterBuilderPopupComponent extends NestedOption impleme
     }
 
     @Input()
-    get onTitleRendered(): ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) {
+    get onTitleRendered(): ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) | undefined {
         return this._getOption('onTitleRendered');
     }
-    set onTitleRendered(value: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void)) {
+    set onTitleRendered(value: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) | undefined) {
         this._setOption('onTitleRendered', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/form.ts b/packages/devextreme-angular/src/ui/tree-list/nested/form.ts
index 7b3ff5644dc5..16895302efae 100644
--- a/packages/devextreme-angular/src/ui/tree-list/nested/form.ts
+++ b/packages/devextreme-angular/src/ui/tree-list/nested/form.ts
@@ -223,18 +223,18 @@ export class DxoTreeListFormComponent extends NestedOption implements OnDestroy,
     }
 
     @Input()
-    get onEditorEnterKey(): ((e: EditorEnterKeyEvent) => void) {
+    get onEditorEnterKey(): ((e: EditorEnterKeyEvent) => void) | undefined {
         return this._getOption('onEditorEnterKey');
     }
-    set onEditorEnterKey(value: ((e: EditorEnterKeyEvent) => void)) {
+    set onEditorEnterKey(value: ((e: EditorEnterKeyEvent) => void) | undefined) {
         this._setOption('onEditorEnterKey', value);
     }
 
     @Input()
-    get onFieldDataChanged(): ((e: FieldDataChangedEvent) => void) {
+    get onFieldDataChanged(): ((e: FieldDataChangedEvent) => void) | undefined {
         return this._getOption('onFieldDataChanged');
     }
-    set onFieldDataChanged(value: ((e: FieldDataChangedEvent) => void)) {
+    set onFieldDataChanged(value: ((e: FieldDataChangedEvent) => void) | undefined) {
         this._setOption('onFieldDataChanged', value);
     }
 
@@ -255,18 +255,18 @@ export class DxoTreeListFormComponent extends NestedOption implements OnDestroy,
     }
 
     @Input()
-    get onSmartPasted(): ((e: SmartPastedEvent) => void) {
+    get onSmartPasted(): ((e: SmartPastedEvent) => void) | undefined {
         return this._getOption('onSmartPasted');
     }
-    set onSmartPasted(value: ((e: SmartPastedEvent) => void)) {
+    set onSmartPasted(value: ((e: SmartPastedEvent) => void) | undefined) {
         this._setOption('onSmartPasted', value);
     }
 
     @Input()
-    get onSmartPasting(): ((e: SmartPastingEvent) => void) {
+    get onSmartPasting(): ((e: SmartPastingEvent) => void) | undefined {
         return this._getOption('onSmartPasting');
     }
-    set onSmartPasting(value: ((e: SmartPastingEvent) => void)) {
+    set onSmartPasting(value: ((e: SmartPastingEvent) => void) | undefined) {
         this._setOption('onSmartPasting', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/options.ts b/packages/devextreme-angular/src/ui/tree-list/nested/options.ts
index 5a623aacd5f1..8432b57658d3 100644
--- a/packages/devextreme-angular/src/ui/tree-list/nested/options.ts
+++ b/packages/devextreme-angular/src/ui/tree-list/nested/options.ts
@@ -114,10 +114,10 @@ export class DxoTreeListOptionsComponent extends NestedOption implements AfterVi
     }
 
     @Input()
-    get onClick(): ((e: ClickEvent) => void) {
+    get onClick(): ((e: ClickEvent) => void) | undefined {
         return this._getOption('onClick');
     }
-    set onClick(value: ((e: ClickEvent) => void)) {
+    set onClick(value: ((e: ClickEvent) => void) | undefined) {
         this._setOption('onClick', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/popup.ts b/packages/devextreme-angular/src/ui/tree-list/nested/popup.ts
index b33db7ea9908..f8759ac785a0 100644
--- a/packages/devextreme-angular/src/ui/tree-list/nested/popup.ts
+++ b/packages/devextreme-angular/src/ui/tree-list/nested/popup.ts
@@ -220,18 +220,18 @@ export class DxoTreeListPopupComponent extends NestedOption implements OnDestroy
     }
 
     @Input()
-    get onContentReady(): ((e: EventInfo<any>) => void) {
+    get onContentReady(): ((e: EventInfo<any>) => void) | undefined {
         return this._getOption('onContentReady');
     }
-    set onContentReady(value: ((e: EventInfo<any>) => void)) {
+    set onContentReady(value: ((e: EventInfo<any>) => void) | undefined) {
         this._setOption('onContentReady', value);
     }
 
     @Input()
-    get onDisposing(): ((e: EventInfo<any>) => void) {
+    get onDisposing(): ((e: EventInfo<any>) => void) | undefined {
         return this._getOption('onDisposing');
     }
-    set onDisposing(value: ((e: EventInfo<any>) => void)) {
+    set onDisposing(value: ((e: EventInfo<any>) => void) | undefined) {
         this._setOption('onDisposing', value);
     }
 
@@ -252,42 +252,42 @@ export class DxoTreeListPopupComponent extends NestedOption implements OnDestroy
     }
 
     @Input()
-    get onInitialized(): ((e: { component: CoreComponent<any>, element: any }) => void) {
+    get onInitialized(): ((e: { component: CoreComponent<any>, element: any }) => void) | undefined {
         return this._getOption('onInitialized');
     }
-    set onInitialized(value: ((e: { component: CoreComponent<any>, element: any }) => void)) {
+    set onInitialized(value: ((e: { component: CoreComponent<any>, element: any }) => void) | undefined) {
         this._setOption('onInitialized', value);
     }
 
     @Input()
-    get onOptionChanged(): ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) {
+    get onOptionChanged(): ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) | undefined {
         return this._getOption('onOptionChanged');
     }
-    set onOptionChanged(value: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void)) {
+    set onOptionChanged(value: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) | undefined) {
         this._setOption('onOptionChanged', value);
     }
 
     @Input()
-    get onResize(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) {
+    get onResize(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined {
         return this._getOption('onResize');
     }
-    set onResize(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)) {
+    set onResize(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined) {
         this._setOption('onResize', value);
     }
 
     @Input()
-    get onResizeEnd(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) {
+    get onResizeEnd(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined {
         return this._getOption('onResizeEnd');
     }
-    set onResizeEnd(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)) {
+    set onResizeEnd(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined) {
         this._setOption('onResizeEnd', value);
     }
 
     @Input()
-    get onResizeStart(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) {
+    get onResizeStart(): ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined {
         return this._getOption('onResizeStart');
     }
-    set onResizeStart(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void)) {
+    set onResizeStart(value: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined) {
         this._setOption('onResizeStart', value);
     }
 
@@ -308,10 +308,10 @@ export class DxoTreeListPopupComponent extends NestedOption implements OnDestroy
     }
 
     @Input()
-    get onTitleRendered(): ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) {
+    get onTitleRendered(): ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) | undefined {
         return this._getOption('onTitleRendered');
     }
-    set onTitleRendered(value: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void)) {
+    set onTitleRendered(value: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) | undefined) {
         this._setOption('onTitleRendered', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/tab-panel-options.ts b/packages/devextreme-angular/src/ui/tree-list/nested/tab-panel-options.ts
index 8608365a8172..781b37800df4 100644
--- a/packages/devextreme-angular/src/ui/tree-list/nested/tab-panel-options.ts
+++ b/packages/devextreme-angular/src/ui/tree-list/nested/tab-panel-options.ts
@@ -288,18 +288,18 @@ export class DxoTreeListTabPanelOptionsComponent extends NestedOption implements
     }
 
     @Input()
-    get onTitleHold(): ((e: TitleHoldEvent) => void) {
+    get onTitleHold(): ((e: TitleHoldEvent) => void) | undefined {
         return this._getOption('onTitleHold');
     }
-    set onTitleHold(value: ((e: TitleHoldEvent) => void)) {
+    set onTitleHold(value: ((e: TitleHoldEvent) => void) | undefined) {
         this._setOption('onTitleHold', value);
     }
 
     @Input()
-    get onTitleRendered(): ((e: TitleRenderedEvent) => void) {
+    get onTitleRendered(): ((e: TitleRenderedEvent) => void) | undefined {
         return this._getOption('onTitleRendered');
     }
-    set onTitleRendered(value: ((e: TitleRenderedEvent) => void)) {
+    set onTitleRendered(value: ((e: TitleRenderedEvent) => void) | undefined) {
         this._setOption('onTitleRendered', value);
     }
 
@@ -344,10 +344,10 @@ export class DxoTreeListTabPanelOptionsComponent extends NestedOption implements
     }
 
     @Input()
-    get selectedItem(): any {
+    get selectedItem(): any | null {
         return this._getOption('selectedItem');
     }
-    set selectedItem(value: any) {
+    set selectedItem(value: any | null) {
         this._setOption('selectedItem', value);
     }
 
@@ -427,7 +427,7 @@ export class DxoTreeListTabPanelOptionsComponent extends NestedOption implements
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() selectedItemChange: EventEmitter<any>;
+    @Output() selectedItemChange: EventEmitter<any | null>;
     protected get _optionPath() {
         return 'tabPanelOptions';
     }
diff --git a/packages/devextreme-angular/src/ui/tree-map/index.ts b/packages/devextreme-angular/src/ui/tree-map/index.ts
index 78c7d1025da9..e63a889e15b4 100644
--- a/packages/devextreme-angular/src/ui/tree-map/index.ts
+++ b/packages/devextreme-angular/src/ui/tree-map/index.ts
@@ -133,10 +133,10 @@ export class DxTreeMapComponent extends DxComponent implements OnDestroy, OnChan
     
      */
     @Input()
-    get colorizer(): { colorCodeField?: string | undefined, colorizeGroups?: boolean, palette?: Array<string> | Palette, paletteExtensionMode?: PaletteExtensionMode, range?: Array<number>, type?: TreeMapColorizerType | undefined } {
+    get colorizer(): { colorCodeField?: string | undefined, colorizeGroups?: boolean, palette?: Array<string> | Palette, paletteExtensionMode?: PaletteExtensionMode, range?: Array<number> | undefined, type?: TreeMapColorizerType | undefined } {
         return this._getOption('colorizer');
     }
-    set colorizer(value: { colorCodeField?: string | undefined, colorizeGroups?: boolean, palette?: Array<string> | Palette, paletteExtensionMode?: PaletteExtensionMode, range?: Array<number>, type?: TreeMapColorizerType | undefined }) {
+    set colorizer(value: { colorCodeField?: string | undefined, colorizeGroups?: boolean, palette?: Array<string> | Palette, paletteExtensionMode?: PaletteExtensionMode, range?: Array<number> | undefined, type?: TreeMapColorizerType | undefined }) {
         this._setOption('colorizer', value);
     }
 
@@ -419,10 +419,10 @@ export class DxTreeMapComponent extends DxComponent implements OnDestroy, OnChan
     
      */
     @Input()
-    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap } {
+    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string | undefined, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap } {
         return this._getOption('title');
     }
-    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }) {
+    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string | undefined, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }) {
         this._setOption('title', value);
     }
 
@@ -583,7 +583,7 @@ export class DxTreeMapComponent extends DxComponent implements OnDestroy, OnChan
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() colorizerChange: EventEmitter<{ colorCodeField?: string | undefined, colorizeGroups?: boolean, palette?: Array<string> | Palette, paletteExtensionMode?: PaletteExtensionMode, range?: Array<number>, type?: TreeMapColorizerType | undefined }>;
+    @Output() colorizerChange: EventEmitter<{ colorCodeField?: string | undefined, colorizeGroups?: boolean, palette?: Array<string> | Palette, paletteExtensionMode?: PaletteExtensionMode, range?: Array<number> | undefined, type?: TreeMapColorizerType | undefined }>;
 
     /**
     
@@ -737,7 +737,7 @@ export class DxTreeMapComponent extends DxComponent implements OnDestroy, OnChan
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() titleChange: EventEmitter<string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }>;
+    @Output() titleChange: EventEmitter<string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string | undefined, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/tree-map/nested/colorizer.ts b/packages/devextreme-angular/src/ui/tree-map/nested/colorizer.ts
index 884e2adc13c3..4d024c8ee7eb 100644
--- a/packages/devextreme-angular/src/ui/tree-map/nested/colorizer.ts
+++ b/packages/devextreme-angular/src/ui/tree-map/nested/colorizer.ts
@@ -65,10 +65,10 @@ export class DxoTreeMapColorizerComponent extends NestedOption implements OnDest
     }
 
     @Input()
-    get range(): Array<number> {
+    get range(): Array<number> | undefined {
         return this._getOption('range');
     }
-    set range(value: Array<number>) {
+    set range(value: Array<number> | undefined) {
         this._setOption('range', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/tree-map/nested/subtitle.ts b/packages/devextreme-angular/src/ui/tree-map/nested/subtitle.ts
index c6a74b357591..cf0fbeda2531 100644
--- a/packages/devextreme-angular/src/ui/tree-map/nested/subtitle.ts
+++ b/packages/devextreme-angular/src/ui/tree-map/nested/subtitle.ts
@@ -48,10 +48,10 @@ export class DxoTreeMapSubtitleComponent extends NestedOption implements OnDestr
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/tree-map/nested/title.ts b/packages/devextreme-angular/src/ui/tree-map/nested/title.ts
index 6a8d3b49e988..5e8a05cc17f8 100644
--- a/packages/devextreme-angular/src/ui/tree-map/nested/title.ts
+++ b/packages/devextreme-angular/src/ui/tree-map/nested/title.ts
@@ -65,18 +65,18 @@ export class DxoTreeMapTitleComponent extends NestedOption implements OnDestroy,
     }
 
     @Input()
-    get subtitle(): string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap } {
+    get subtitle(): string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap } {
         return this._getOption('subtitle');
     }
-    set subtitle(value: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }) {
+    set subtitle(value: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }) {
         this._setOption('subtitle', value);
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/tree-view/nested/options.ts b/packages/devextreme-angular/src/ui/tree-view/nested/options.ts
index f01996ce101f..cfe226979573 100644
--- a/packages/devextreme-angular/src/ui/tree-view/nested/options.ts
+++ b/packages/devextreme-angular/src/ui/tree-view/nested/options.ts
@@ -114,10 +114,10 @@ export class DxoTreeViewOptionsComponent extends NestedOption implements AfterVi
     }
 
     @Input()
-    get onClick(): ((e: ClickEvent) => void) {
+    get onClick(): ((e: ClickEvent) => void) | undefined {
         return this._getOption('onClick');
     }
-    set onClick(value: ((e: ClickEvent) => void)) {
+    set onClick(value: ((e: ClickEvent) => void) | undefined) {
         this._setOption('onClick', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/tree-view/nested/search-editor-options.ts b/packages/devextreme-angular/src/ui/tree-view/nested/search-editor-options.ts
index 936fd7424189..19875669bcb1 100644
--- a/packages/devextreme-angular/src/ui/tree-view/nested/search-editor-options.ts
+++ b/packages/devextreme-angular/src/ui/tree-view/nested/search-editor-options.ts
@@ -62,10 +62,10 @@ export class DxoTreeViewSearchEditorOptionsComponent extends NestedOption implem
     }
 
     @Input()
-    get buttons(): Array<string | TextBoxPredefinedButton | TextEditorButton> {
+    get buttons(): Array<string | TextBoxPredefinedButton | TextEditorButton> | undefined {
         return this._getOption('buttons');
     }
-    set buttons(value: Array<string | TextBoxPredefinedButton | TextEditorButton>) {
+    set buttons(value: Array<string | TextBoxPredefinedButton | TextEditorButton> | undefined) {
         this._setOption('buttons', value);
     }
 
@@ -190,10 +190,10 @@ export class DxoTreeViewSearchEditorOptionsComponent extends NestedOption implem
     }
 
     @Input()
-    get maxLength(): number | string {
+    get maxLength(): null | number | string {
         return this._getOption('maxLength');
     }
-    set maxLength(value: number | string) {
+    set maxLength(value: null | number | string) {
         this._setOption('maxLength', value);
     }
 
@@ -414,18 +414,18 @@ export class DxoTreeViewSearchEditorOptionsComponent extends NestedOption implem
     }
 
     @Input()
-    get validationError(): any {
+    get validationError(): any | null {
         return this._getOption('validationError');
     }
-    set validationError(value: any) {
+    set validationError(value: any | null) {
         this._setOption('validationError', value);
     }
 
     @Input()
-    get validationErrors(): Array<any> {
+    get validationErrors(): Array<any> | null {
         return this._getOption('validationErrors');
     }
-    set validationErrors(value: Array<any>) {
+    set validationErrors(value: Array<any> | null) {
         this._setOption('validationErrors', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/vector-map/index.ts b/packages/devextreme-angular/src/ui/vector-map/index.ts
index 9d5f5fb9cb41..d009e97df54b 100644
--- a/packages/devextreme-angular/src/ui/vector-map/index.ts
+++ b/packages/devextreme-angular/src/ui/vector-map/index.ts
@@ -164,10 +164,10 @@ export class DxVectorMapComponent extends DxComponent implements OnDestroy, OnCh
     
      */
     @Input()
-    get bounds(): Array<number> {
+    get bounds(): Array<number> | undefined {
         return this._getOption('bounds');
     }
-    set bounds(value: Array<number>) {
+    set bounds(value: Array<number> | undefined) {
         this._setOption('bounds', value);
     }
 
@@ -268,10 +268,10 @@ export class DxVectorMapComponent extends DxComponent implements OnDestroy, OnCh
     
      */
     @Input()
-    get layers(): { borderColor?: string, borderWidth?: number, color?: string, colorGroupingField?: string | undefined, colorGroups?: Array<number>, customize?: ((elements: Array<MapLayerElement>) => void), dataField?: string | undefined, dataSource?: Array<any> | DataSource | DataSourceOptions | null | Record<string, any> | Store | string, elementType?: VectorMapMarkerType, hoveredBorderColor?: string, hoveredBorderWidth?: number, hoveredColor?: string, hoverEnabled?: boolean, label?: { dataField?: string, enabled?: boolean, font?: Font }, maxSize?: number, minSize?: number, name?: string, opacity?: number, palette?: Array<string> | Palette, paletteIndex?: number, paletteSize?: number, selectedBorderColor?: string, selectedBorderWidth?: number, selectedColor?: string, selectionMode?: SingleMultipleOrNone, size?: number, sizeGroupingField?: string | undefined, sizeGroups?: Array<number>, type?: VectorMapLayerType }[] {
+    get layers(): { borderColor?: string, borderWidth?: number, color?: string, colorGroupingField?: string | undefined, colorGroups?: Array<number> | undefined, customize?: ((elements: Array<MapLayerElement>) => void), dataField?: string | undefined, dataSource?: Array<any> | DataSource | DataSourceOptions | null | Record<string, any> | Store | string, elementType?: VectorMapMarkerType, hoveredBorderColor?: string, hoveredBorderWidth?: number, hoveredColor?: string, hoverEnabled?: boolean, label?: { dataField?: string, enabled?: boolean, font?: Font }, maxSize?: number, minSize?: number, name?: string, opacity?: number, palette?: Array<string> | Palette, paletteIndex?: number, paletteSize?: number, selectedBorderColor?: string, selectedBorderWidth?: number, selectedColor?: string, selectionMode?: SingleMultipleOrNone, size?: number, sizeGroupingField?: string | undefined, sizeGroups?: Array<number> | undefined, type?: VectorMapLayerType }[] {
         return this._getOption('layers');
     }
-    set layers(value: { borderColor?: string, borderWidth?: number, color?: string, colorGroupingField?: string | undefined, colorGroups?: Array<number>, customize?: ((elements: Array<MapLayerElement>) => void), dataField?: string | undefined, dataSource?: Array<any> | DataSource | DataSourceOptions | null | Record<string, any> | Store | string, elementType?: VectorMapMarkerType, hoveredBorderColor?: string, hoveredBorderWidth?: number, hoveredColor?: string, hoverEnabled?: boolean, label?: { dataField?: string, enabled?: boolean, font?: Font }, maxSize?: number, minSize?: number, name?: string, opacity?: number, palette?: Array<string> | Palette, paletteIndex?: number, paletteSize?: number, selectedBorderColor?: string, selectedBorderWidth?: number, selectedColor?: string, selectionMode?: SingleMultipleOrNone, size?: number, sizeGroupingField?: string | undefined, sizeGroups?: Array<number>, type?: VectorMapLayerType }[]) {
+    set layers(value: { borderColor?: string, borderWidth?: number, color?: string, colorGroupingField?: string | undefined, colorGroups?: Array<number> | undefined, customize?: ((elements: Array<MapLayerElement>) => void), dataField?: string | undefined, dataSource?: Array<any> | DataSource | DataSourceOptions | null | Record<string, any> | Store | string, elementType?: VectorMapMarkerType, hoveredBorderColor?: string, hoveredBorderWidth?: number, hoveredColor?: string, hoverEnabled?: boolean, label?: { dataField?: string, enabled?: boolean, font?: Font }, maxSize?: number, minSize?: number, name?: string, opacity?: number, palette?: Array<string> | Palette, paletteIndex?: number, paletteSize?: number, selectedBorderColor?: string, selectedBorderWidth?: number, selectedColor?: string, selectionMode?: SingleMultipleOrNone, size?: number, sizeGroupingField?: string | undefined, sizeGroups?: Array<number> | undefined, type?: VectorMapLayerType }[]) {
         this._setOption('layers', value);
     }
 
@@ -281,10 +281,10 @@ export class DxVectorMapComponent extends DxComponent implements OnDestroy, OnCh
     
      */
     @Input()
-    get legends(): { backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((itemInfo: { color: string, end: number, index: number, size: number, start: number }) => string), customizeItems?: ((items: Array<VectorMapLegendItem>) => Array<VectorMapLegendItem>), customizeText?: ((itemInfo: { color: string, end: number, index: number, size: number, start: number }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, itemsAlignment?: HorizontalAlignment | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerColor?: string | undefined, markerShape?: VectorMapMarkerShape, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, rowCount?: number, rowItemSpacing?: number, source?: { grouping?: string, layer?: string }, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean }[] {
+    get legends(): { backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((itemInfo: { color: string, end: number, index: number, size: number, start: number }) => string), customizeItems?: ((items: Array<VectorMapLegendItem>) => Array<VectorMapLegendItem>), customizeText?: ((itemInfo: { color: string, end: number, index: number, size: number, start: number }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, itemsAlignment?: HorizontalAlignment | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerColor?: string | undefined, markerShape?: VectorMapMarkerShape, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, rowCount?: number, rowItemSpacing?: number, source?: { grouping?: string, layer?: string }, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined }, text?: string | undefined, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean }[] {
         return this._getOption('legends');
     }
-    set legends(value: { backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((itemInfo: { color: string, end: number, index: number, size: number, start: number }) => string), customizeItems?: ((items: Array<VectorMapLegendItem>) => Array<VectorMapLegendItem>), customizeText?: ((itemInfo: { color: string, end: number, index: number, size: number, start: number }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, itemsAlignment?: HorizontalAlignment | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerColor?: string | undefined, markerShape?: VectorMapMarkerShape, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, rowCount?: number, rowItemSpacing?: number, source?: { grouping?: string, layer?: string }, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean }[]) {
+    set legends(value: { backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((itemInfo: { color: string, end: number, index: number, size: number, start: number }) => string), customizeItems?: ((items: Array<VectorMapLegendItem>) => Array<VectorMapLegendItem>), customizeText?: ((itemInfo: { color: string, end: number, index: number, size: number, start: number }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, itemsAlignment?: HorizontalAlignment | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerColor?: string | undefined, markerShape?: VectorMapMarkerShape, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, rowCount?: number, rowItemSpacing?: number, source?: { grouping?: string, layer?: string }, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined }, text?: string | undefined, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean }[]) {
         this._setOption('legends', value);
     }
 
@@ -411,10 +411,10 @@ export class DxVectorMapComponent extends DxComponent implements OnDestroy, OnCh
     
      */
     @Input()
-    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap } {
+    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string | undefined, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap } {
         return this._getOption('title');
     }
-    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }) {
+    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string | undefined, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }) {
         this._setOption('title', value);
     }
 
@@ -614,7 +614,7 @@ export class DxVectorMapComponent extends DxComponent implements OnDestroy, OnCh
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() boundsChange: EventEmitter<Array<number>>;
+    @Output() boundsChange: EventEmitter<Array<number> | undefined>;
 
     /**
     
@@ -670,14 +670,14 @@ export class DxVectorMapComponent extends DxComponent implements OnDestroy, OnCh
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() layersChange: EventEmitter<{ borderColor?: string, borderWidth?: number, color?: string, colorGroupingField?: string | undefined, colorGroups?: Array<number>, customize?: ((elements: Array<MapLayerElement>) => void), dataField?: string | undefined, dataSource?: Array<any> | DataSource | DataSourceOptions | null | Record<string, any> | Store | string, elementType?: VectorMapMarkerType, hoveredBorderColor?: string, hoveredBorderWidth?: number, hoveredColor?: string, hoverEnabled?: boolean, label?: { dataField?: string, enabled?: boolean, font?: Font }, maxSize?: number, minSize?: number, name?: string, opacity?: number, palette?: Array<string> | Palette, paletteIndex?: number, paletteSize?: number, selectedBorderColor?: string, selectedBorderWidth?: number, selectedColor?: string, selectionMode?: SingleMultipleOrNone, size?: number, sizeGroupingField?: string | undefined, sizeGroups?: Array<number>, type?: VectorMapLayerType }[]>;
+    @Output() layersChange: EventEmitter<{ borderColor?: string, borderWidth?: number, color?: string, colorGroupingField?: string | undefined, colorGroups?: Array<number> | undefined, customize?: ((elements: Array<MapLayerElement>) => void), dataField?: string | undefined, dataSource?: Array<any> | DataSource | DataSourceOptions | null | Record<string, any> | Store | string, elementType?: VectorMapMarkerType, hoveredBorderColor?: string, hoveredBorderWidth?: number, hoveredColor?: string, hoverEnabled?: boolean, label?: { dataField?: string, enabled?: boolean, font?: Font }, maxSize?: number, minSize?: number, name?: string, opacity?: number, palette?: Array<string> | Palette, paletteIndex?: number, paletteSize?: number, selectedBorderColor?: string, selectedBorderWidth?: number, selectedColor?: string, selectionMode?: SingleMultipleOrNone, size?: number, sizeGroupingField?: string | undefined, sizeGroups?: Array<number> | undefined, type?: VectorMapLayerType }[]>;
 
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() legendsChange: EventEmitter<{ backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((itemInfo: { color: string, end: number, index: number, size: number, start: number }) => string), customizeItems?: ((items: Array<VectorMapLegendItem>) => Array<VectorMapLegendItem>), customizeText?: ((itemInfo: { color: string, end: number, index: number, size: number, start: number }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, itemsAlignment?: HorizontalAlignment | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerColor?: string | undefined, markerShape?: VectorMapMarkerShape, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, rowCount?: number, rowItemSpacing?: number, source?: { grouping?: string, layer?: string }, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean }[]>;
+    @Output() legendsChange: EventEmitter<{ backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((itemInfo: { color: string, end: number, index: number, size: number, start: number }) => string), customizeItems?: ((items: Array<VectorMapLegendItem>) => Array<VectorMapLegendItem>), customizeText?: ((itemInfo: { color: string, end: number, index: number, size: number, start: number }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, itemsAlignment?: HorizontalAlignment | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerColor?: string | undefined, markerShape?: VectorMapMarkerShape, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, rowCount?: number, rowItemSpacing?: number, source?: { grouping?: string, layer?: string }, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined }, text?: string | undefined, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean }[]>;
 
     /**
     
@@ -747,7 +747,7 @@ export class DxVectorMapComponent extends DxComponent implements OnDestroy, OnCh
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() titleChange: EventEmitter<string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }>;
+    @Output() titleChange: EventEmitter<string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string | undefined, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/vector-map/nested/annotation-dxi.ts b/packages/devextreme-angular/src/ui/vector-map/nested/annotation-dxi.ts
index 576df388e07d..30322411f175 100644
--- a/packages/devextreme-angular/src/ui/vector-map/nested/annotation-dxi.ts
+++ b/packages/devextreme-angular/src/ui/vector-map/nested/annotation-dxi.ts
@@ -88,10 +88,10 @@ export class DxiVectorMapAnnotationComponent extends CollectionNestedOption impl
     }
 
     @Input()
-    get coordinates(): Array<number> {
+    get coordinates(): Array<number> | undefined {
         return this._getOption('coordinates');
     }
-    set coordinates(value: Array<number>) {
+    set coordinates(value: Array<number> | undefined) {
         this._setOption('coordinates', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/vector-map/nested/common-annotation-settings.ts b/packages/devextreme-angular/src/ui/vector-map/nested/common-annotation-settings.ts
index cecfb820d50a..a575cf58634f 100644
--- a/packages/devextreme-angular/src/ui/vector-map/nested/common-annotation-settings.ts
+++ b/packages/devextreme-angular/src/ui/vector-map/nested/common-annotation-settings.ts
@@ -82,10 +82,10 @@ export class DxoVectorMapCommonAnnotationSettingsComponent extends NestedOption
     }
 
     @Input()
-    get coordinates(): Array<number> {
+    get coordinates(): Array<number> | undefined {
         return this._getOption('coordinates');
     }
-    set coordinates(value: Array<number>) {
+    set coordinates(value: Array<number> | undefined) {
         this._setOption('coordinates', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/vector-map/nested/layer-dxi.ts b/packages/devextreme-angular/src/ui/vector-map/nested/layer-dxi.ts
index d22631a098eb..0136d674c24d 100644
--- a/packages/devextreme-angular/src/ui/vector-map/nested/layer-dxi.ts
+++ b/packages/devextreme-angular/src/ui/vector-map/nested/layer-dxi.ts
@@ -73,10 +73,10 @@ export class DxiVectorMapLayerComponent extends CollectionNestedOption {
     }
 
     @Input()
-    get colorGroups(): Array<number> {
+    get colorGroups(): Array<number> | undefined {
         return this._getOption('colorGroups');
     }
-    set colorGroups(value: Array<number>) {
+    set colorGroups(value: Array<number> | undefined) {
         this._setOption('colorGroups', value);
     }
 
@@ -257,10 +257,10 @@ export class DxiVectorMapLayerComponent extends CollectionNestedOption {
     }
 
     @Input()
-    get sizeGroups(): Array<number> {
+    get sizeGroups(): Array<number> | undefined {
         return this._getOption('sizeGroups');
     }
-    set sizeGroups(value: Array<number>) {
+    set sizeGroups(value: Array<number> | undefined) {
         this._setOption('sizeGroups', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/vector-map/nested/legend-dxi.ts b/packages/devextreme-angular/src/ui/vector-map/nested/legend-dxi.ts
index 3316a0be01c6..a6d2ccb47ce7 100644
--- a/packages/devextreme-angular/src/ui/vector-map/nested/legend-dxi.ts
+++ b/packages/devextreme-angular/src/ui/vector-map/nested/legend-dxi.ts
@@ -215,10 +215,10 @@ export class DxiVectorMapLegendComponent extends CollectionNestedOption {
     }
 
     @Input()
-    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge } {
+    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined }, text?: string | undefined, verticalAlignment?: VerticalEdge } {
         return this._getOption('title');
     }
-    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge }) {
+    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string | undefined }, text?: string | undefined, verticalAlignment?: VerticalEdge }) {
         this._setOption('title', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/vector-map/nested/legend-title-subtitle.ts b/packages/devextreme-angular/src/ui/vector-map/nested/legend-title-subtitle.ts
index 20b16a8d6882..6f2ae4b69d7e 100644
--- a/packages/devextreme-angular/src/ui/vector-map/nested/legend-title-subtitle.ts
+++ b/packages/devextreme-angular/src/ui/vector-map/nested/legend-title-subtitle.ts
@@ -48,10 +48,10 @@ export class DxoVectorMapLegendTitleSubtitleComponent extends NestedOption imple
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/vector-map/nested/legend-title.ts b/packages/devextreme-angular/src/ui/vector-map/nested/legend-title.ts
index 557fa4a85230..497467eb2182 100644
--- a/packages/devextreme-angular/src/ui/vector-map/nested/legend-title.ts
+++ b/packages/devextreme-angular/src/ui/vector-map/nested/legend-title.ts
@@ -65,18 +65,18 @@ export class DxoVectorMapLegendTitleComponent extends NestedOption implements On
     }
 
     @Input()
-    get subtitle(): string | { font?: Font, offset?: number, text?: string } {
+    get subtitle(): string | { font?: Font, offset?: number, text?: string | undefined } {
         return this._getOption('subtitle');
     }
-    set subtitle(value: string | { font?: Font, offset?: number, text?: string }) {
+    set subtitle(value: string | { font?: Font, offset?: number, text?: string | undefined }) {
         this._setOption('subtitle', value);
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/vector-map/nested/subtitle.ts b/packages/devextreme-angular/src/ui/vector-map/nested/subtitle.ts
index 624b43fb9dc1..4eb3ba47db1d 100644
--- a/packages/devextreme-angular/src/ui/vector-map/nested/subtitle.ts
+++ b/packages/devextreme-angular/src/ui/vector-map/nested/subtitle.ts
@@ -48,10 +48,10 @@ export class DxoVectorMapSubtitleComponent extends NestedOption implements OnDes
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/vector-map/nested/title.ts b/packages/devextreme-angular/src/ui/vector-map/nested/title.ts
index 25c24011b957..31e6f202efa5 100644
--- a/packages/devextreme-angular/src/ui/vector-map/nested/title.ts
+++ b/packages/devextreme-angular/src/ui/vector-map/nested/title.ts
@@ -65,18 +65,18 @@ export class DxoVectorMapTitleComponent extends NestedOption implements OnDestro
     }
 
     @Input()
-    get subtitle(): string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap } {
+    get subtitle(): string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap } {
         return this._getOption('subtitle');
     }
-    set subtitle(value: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }) {
+    set subtitle(value: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }) {
         this._setOption('subtitle', value);
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/vector-map/nested/vector-map-title-subtitle.ts b/packages/devextreme-angular/src/ui/vector-map/nested/vector-map-title-subtitle.ts
index 66de0fc86065..452cac6dca08 100644
--- a/packages/devextreme-angular/src/ui/vector-map/nested/vector-map-title-subtitle.ts
+++ b/packages/devextreme-angular/src/ui/vector-map/nested/vector-map-title-subtitle.ts
@@ -48,10 +48,10 @@ export class DxoVectorMapVectorMapTitleSubtitleComponent extends NestedOption im
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/vector-map/nested/vector-map-title.ts b/packages/devextreme-angular/src/ui/vector-map/nested/vector-map-title.ts
index 7a90f6a4a3d2..fa502477a3e6 100644
--- a/packages/devextreme-angular/src/ui/vector-map/nested/vector-map-title.ts
+++ b/packages/devextreme-angular/src/ui/vector-map/nested/vector-map-title.ts
@@ -65,18 +65,18 @@ export class DxoVectorMapVectorMapTitleComponent extends NestedOption implements
     }
 
     @Input()
-    get subtitle(): string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap } {
+    get subtitle(): string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap } {
         return this._getOption('subtitle');
     }
-    set subtitle(value: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }) {
+    set subtitle(value: string | { font?: Font, offset?: number, text?: string | undefined, textOverflow?: TextOverflow, wordWrap?: WordWrap }) {
         this._setOption('subtitle', value);
     }
 
     @Input()
-    get text(): string {
+    get text(): string | undefined {
         return this._getOption('text');
     }
-    set text(value: string) {
+    set text(value: string | undefined) {
         this._setOption('text', value);
     }
 
diff --git a/packages/devextreme-react/src/accordion.ts b/packages/devextreme-react/src/accordion.ts
index 570969a135c5..74a19e2318d5 100644
--- a/packages/devextreme-react/src/accordion.ts
+++ b/packages/devextreme-react/src/accordion.ts
@@ -36,12 +36,12 @@ type IAccordionOptions<TItem = any, TKey = any> = React.PropsWithChildren<Replac
   itemTitleComponent?: React.ComponentType<any>;
   defaultItems?: Array<any | dxAccordionItem | string>;
   defaultSelectedIndex?: number;
-  defaultSelectedItem?: any;
+  defaultSelectedItem?: any | null;
   defaultSelectedItemKeys?: Array<any>;
   defaultSelectedItems?: Array<any>;
   onItemsChange?: (value: Array<any | dxAccordionItem | string>) => void;
   onSelectedIndexChange?: (value: number) => void;
-  onSelectedItemChange?: (value: any) => void;
+  onSelectedItemChange?: (value: any | null) => void;
   onSelectedItemKeysChange?: (value: Array<any>) => void;
   onSelectedItemsChange?: (value: Array<any>) => void;
 }>
diff --git a/packages/devextreme-react/src/autocomplete.ts b/packages/devextreme-react/src/autocomplete.ts
index 429e56578252..48637530768f 100644
--- a/packages/devextreme-react/src/autocomplete.ts
+++ b/packages/devextreme-react/src/autocomplete.ts
@@ -257,18 +257,18 @@ type IDropDownOptionsProps = React.PropsWithChildren<{
   maxWidth?: number | string;
   minHeight?: number | string;
   minWidth?: number | string;
-  onContentReady?: ((e: EventInfo<any>) => void);
-  onDisposing?: ((e: EventInfo<any>) => void);
+  onContentReady?: ((e: EventInfo<any>) => void) | undefined;
+  onDisposing?: ((e: EventInfo<any>) => void) | undefined;
   onHidden?: ((e: EventInfo<any>) => void);
   onHiding?: ((e: { cancel: boolean | any, component: dxOverlay<any>, element: any, model: any }) => void);
-  onInitialized?: ((e: { component: Component<any>, element: any }) => void);
-  onOptionChanged?: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void);
-  onResize?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void);
-  onResizeEnd?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void);
-  onResizeStart?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void);
+  onInitialized?: ((e: { component: Component<any>, element: any }) => void) | undefined;
+  onOptionChanged?: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) | undefined;
+  onResize?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined;
+  onResizeEnd?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined;
+  onResizeStart?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined;
   onShowing?: ((e: { cancel: boolean | any, component: dxOverlay<any>, element: any, model: any }) => void);
   onShown?: ((e: EventInfo<any>) => void);
-  onTitleRendered?: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void);
+  onTitleRendered?: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) | undefined;
   position?: (() => void) | PositionAlignment | PositionConfig;
   resizeEnabled?: boolean;
   restorePosition?: boolean;
@@ -468,7 +468,7 @@ type IOptionsProps = React.PropsWithChildren<{
   hint?: string | undefined;
   hoverStateEnabled?: boolean;
   icon?: string;
-  onClick?: ((e: ClickEvent) => void);
+  onClick?: ((e: ClickEvent) => void) | undefined;
   onContentReady?: ((e: ButtonContentReadyEvent) => void);
   onDisposing?: ((e: ButtonDisposingEvent) => void);
   onInitialized?: ((e: ButtonInitializedEvent) => void);
diff --git a/packages/devextreme-react/src/bar-gauge.ts b/packages/devextreme-react/src/bar-gauge.ts
index 7f0b7875734d..e572011c3655 100644
--- a/packages/devextreme-react/src/bar-gauge.ts
+++ b/packages/devextreme-react/src/bar-gauge.ts
@@ -25,8 +25,8 @@ type IBarGaugeOptionsNarrowedEvents = {
   onFileSaving?: ((e: FileSavingEvent) => void);
   onIncidentOccurred?: ((e: IncidentOccurredEvent) => void);
   onInitialized?: ((e: InitializedEvent) => void);
-  onTooltipHidden?: ((e: TooltipHiddenEvent) => void);
-  onTooltipShown?: ((e: TooltipShownEvent) => void);
+  onTooltipHidden?: ((e: TooltipHiddenEvent) => void) | undefined;
+  onTooltipShown?: ((e: TooltipShownEvent) => void) | undefined;
 }
 
 type IBarGaugeOptions = React.PropsWithChildren<ReplaceFieldTypes<Properties, IBarGaugeOptionsNarrowedEvents> & IHtmlOptions & {
@@ -137,11 +137,11 @@ type IBarGaugeTitleProps = React.PropsWithChildren<{
   subtitle?: Record<string, any> | string | {
     font?: ChartsFont;
     offset?: number;
-    text?: string;
+    text?: string | undefined;
     textOverflow?: TextOverflow;
     wordWrap?: WordWrap;
   };
-  text?: string;
+  text?: string | undefined;
   textOverflow?: TextOverflow;
   verticalAlignment?: VerticalEdge;
   wordWrap?: WordWrap;
@@ -170,7 +170,7 @@ const BarGaugeTitle = Object.assign<typeof _componentBarGaugeTitle, NestedCompon
 type IBarGaugeTitleSubtitleProps = React.PropsWithChildren<{
   font?: ChartsFont;
   offset?: number;
-  text?: string;
+  text?: string | undefined;
   textOverflow?: TextOverflow;
   wordWrap?: WordWrap;
 }>
@@ -409,9 +409,9 @@ type ILegendProps = React.PropsWithChildren<{
     subtitle?: Record<string, any> | string | {
       font?: ChartsFont;
       offset?: number;
-      text?: string;
+      text?: string | undefined;
     };
-    text?: string;
+    text?: string | undefined;
     verticalAlignment?: VerticalEdge;
   };
   verticalAlignment?: VerticalEdge;
@@ -484,9 +484,9 @@ type ILegendTitleProps = React.PropsWithChildren<{
   subtitle?: Record<string, any> | string | {
     font?: ChartsFont;
     offset?: number;
-    text?: string;
+    text?: string | undefined;
   };
-  text?: string;
+  text?: string | undefined;
   verticalAlignment?: VerticalEdge;
 }>
 const _componentLegendTitle = (props: ILegendTitleProps) => {
@@ -513,7 +513,7 @@ const LegendTitle = Object.assign<typeof _componentLegendTitle, NestedComponentM
 type ILegendTitleSubtitleProps = React.PropsWithChildren<{
   font?: ChartsFont;
   offset?: number;
-  text?: string;
+  text?: string | undefined;
 }>
 const _componentLegendTitleSubtitle = (props: ILegendTitleSubtitleProps) => {
   return React.createElement(NestedOption<ILegendTitleSubtitleProps>, {
@@ -631,7 +631,7 @@ const Size = Object.assign<typeof _componentSize, NestedComponentMeta>(_componen
 type ISubtitleProps = React.PropsWithChildren<{
   font?: ChartsFont;
   offset?: number;
-  text?: string;
+  text?: string | undefined;
   textOverflow?: TextOverflow;
   wordWrap?: WordWrap;
 }>
@@ -667,11 +667,11 @@ type ITitleProps = React.PropsWithChildren<{
   subtitle?: Record<string, any> | string | {
     font?: ChartsFont;
     offset?: number;
-    text?: string;
+    text?: string | undefined;
     textOverflow?: TextOverflow;
     wordWrap?: WordWrap;
   };
-  text?: string;
+  text?: string | undefined;
   verticalAlignment?: VerticalEdge;
   textOverflow?: TextOverflow;
   wordWrap?: WordWrap;
diff --git a/packages/devextreme-react/src/button-group.ts b/packages/devextreme-react/src/button-group.ts
index ea501fa0e358..babe593d231b 100644
--- a/packages/devextreme-react/src/button-group.ts
+++ b/packages/devextreme-react/src/button-group.ts
@@ -20,7 +20,7 @@ type IButtonGroupOptionsNarrowedEvents = {
   onContentReady?: ((e: ContentReadyEvent) => void);
   onDisposing?: ((e: DisposingEvent) => void);
   onInitialized?: ((e: InitializedEvent) => void);
-  onItemClick?: ((e: ItemClickEvent) => void);
+  onItemClick?: ((e: ItemClickEvent) => void) | undefined;
 }
 
 type IButtonGroupOptions = React.PropsWithChildren<ReplaceFieldTypes<Properties, IButtonGroupOptionsNarrowedEvents> & IHtmlOptions & {
diff --git a/packages/devextreme-react/src/button.ts b/packages/devextreme-react/src/button.ts
index 571b99dfe152..fff1e1677b22 100644
--- a/packages/devextreme-react/src/button.ts
+++ b/packages/devextreme-react/src/button.ts
@@ -14,7 +14,7 @@ type ReplaceFieldTypes<TSource, TReplacement> = {
 }
 
 type IButtonOptionsNarrowedEvents = {
-  onClick?: ((e: ClickEvent) => void);
+  onClick?: ((e: ClickEvent) => void) | undefined;
   onContentReady?: ((e: ContentReadyEvent) => void);
   onDisposing?: ((e: DisposingEvent) => void);
   onInitialized?: ((e: InitializedEvent) => void);
diff --git a/packages/devextreme-react/src/card-view.ts b/packages/devextreme-react/src/card-view.ts
index 4cf1b45263e7..f1553c20454e 100644
--- a/packages/devextreme-react/src/card-view.ts
+++ b/packages/devextreme-react/src/card-view.ts
@@ -319,7 +319,7 @@ type IButtonOptionsProps = React.PropsWithChildren<{
   hint?: string | undefined;
   hoverStateEnabled?: boolean;
   icon?: string;
-  onClick?: ((e: ClickEvent) => void);
+  onClick?: ((e: ClickEvent) => void) | undefined;
   onContentReady?: ((e: ContentReadyEvent) => void);
   onDisposing?: ((e: DisposingEvent) => void);
   onInitialized?: ((e: InitializedEvent) => void);
@@ -1317,12 +1317,12 @@ type IFormProps = React.PropsWithChildren<{
   minColWidth?: number;
   onContentReady?: ((e: FormContentReadyEvent) => void);
   onDisposing?: ((e: FormDisposingEvent) => void);
-  onEditorEnterKey?: ((e: EditorEnterKeyEvent) => void);
-  onFieldDataChanged?: ((e: FieldDataChangedEvent) => void);
+  onEditorEnterKey?: ((e: EditorEnterKeyEvent) => void) | undefined;
+  onFieldDataChanged?: ((e: FieldDataChangedEvent) => void) | undefined;
   onInitialized?: ((e: FormInitializedEvent) => void);
   onOptionChanged?: ((e: FormOptionChangedEvent) => void);
-  onSmartPasted?: ((e: SmartPastedEvent) => void);
-  onSmartPasting?: ((e: SmartPastingEvent) => void);
+  onSmartPasted?: ((e: SmartPastedEvent) => void) | undefined;
+  onSmartPasting?: ((e: SmartPastingEvent) => void) | undefined;
   optionalMark?: string;
   readOnly?: boolean;
   requiredMark?: string;
@@ -2583,14 +2583,14 @@ type ITabPanelOptionsProps = React.PropsWithChildren<{
   onSelectionChanged?: ((e: SelectionChangedEvent) => void);
   onSelectionChanging?: ((e: SelectionChangingEvent) => void);
   onTitleClick?: ((e: TitleClickEvent) => void);
-  onTitleHold?: ((e: TitleHoldEvent) => void);
-  onTitleRendered?: ((e: TitleRenderedEvent) => void);
+  onTitleHold?: ((e: TitleHoldEvent) => void) | undefined;
+  onTitleRendered?: ((e: TitleRenderedEvent) => void) | undefined;
   repaintChangesOnly?: boolean;
   rtlEnabled?: boolean;
   scrollByContent?: boolean;
   scrollingEnabled?: boolean;
   selectedIndex?: number;
-  selectedItem?: any;
+  selectedItem?: any | null;
   showNavButtons?: boolean;
   stylingMode?: TabsStyle;
   swipeEnabled?: boolean;
@@ -2602,8 +2602,8 @@ type ITabPanelOptionsProps = React.PropsWithChildren<{
   onItemsChange?: (value: Array<any | dxTabPanelItem | string>) => void;
   defaultSelectedIndex?: number;
   onSelectedIndexChange?: (value: number) => void;
-  defaultSelectedItem?: any;
-  onSelectedItemChange?: (value: any) => void;
+  defaultSelectedItem?: any | null;
+  onSelectedItemChange?: (value: any | null) => void;
   itemRender?: (...params: any) => React.ReactNode;
   itemComponent?: React.ComponentType<any>;
   itemTitleRender?: (...params: any) => React.ReactNode;
diff --git a/packages/devextreme-react/src/chart.ts b/packages/devextreme-react/src/chart.ts
index 50be1aa56325..65e1242de340 100644
--- a/packages/devextreme-react/src/chart.ts
+++ b/packages/devextreme-react/src/chart.ts
@@ -35,8 +35,8 @@ type IChartOptionsNarrowedEvents = {
   onSeriesClick?: ((e: SeriesClickEvent) => void);
   onTooltipHidden?: ((e: TooltipHiddenEvent) => void);
   onTooltipShown?: ((e: TooltipShownEvent) => void);
-  onZoomEnd?: ((e: ZoomEndEvent) => void);
-  onZoomStart?: ((e: ZoomStartEvent) => void);
+  onZoomEnd?: ((e: ZoomEndEvent) => void) | undefined;
+  onZoomStart?: ((e: ZoomStartEvent) => void) | undefined;
 }
 
 type IChartOptions = React.PropsWithChildren<ReplaceFieldTypes<Properties, IChartOptionsNarrowedEvents> & IHtmlOptions & {
@@ -359,7 +359,7 @@ type IArgumentAxisProps = React.PropsWithChildren<{
   allowDecimals?: boolean | undefined;
   argumentType?: ChartsDataType | undefined;
   axisDivisionFactor?: number;
-  breaks?: Array<ScaleBreak> | {
+  breaks?: Array<ScaleBreak> | undefined | {
     endValue?: Date | number | string | undefined;
     startValue?: Date | number | string | undefined;
   }[];
@@ -412,7 +412,7 @@ type IArgumentAxisProps = React.PropsWithChildren<{
     visible?: boolean;
     width?: number;
   };
-  holidays?: Array<Date | string> | Array<number>;
+  holidays?: Array<Date | string> | Array<number> | undefined;
   hoverMode?: ArgumentAxisHoverMode;
   inverted?: boolean;
   label?: Record<string, any> | {
@@ -475,9 +475,9 @@ type IArgumentAxisProps = React.PropsWithChildren<{
   };
   offset?: number | undefined;
   opacity?: number | undefined;
-  placeholderSize?: number;
+  placeholderSize?: null | number;
   position?: Position;
-  singleWorkdays?: Array<Date | string> | Array<number>;
+  singleWorkdays?: Array<Date | string> | Array<number> | undefined;
   strips?: Array<Record<string, any>> | {
     color?: string | undefined;
     endValue?: Date | number | string | undefined;
@@ -851,11 +851,11 @@ type IChartTitleProps = React.PropsWithChildren<{
   subtitle?: Record<string, any> | string | {
     font?: ChartsFont;
     offset?: number;
-    text?: string;
+    text?: string | undefined;
     textOverflow?: TextOverflow;
     wordWrap?: WordWrap;
   };
-  text?: string;
+  text?: string | undefined;
   textOverflow?: TextOverflow;
   verticalAlignment?: VerticalEdge;
   wordWrap?: WordWrap;
@@ -884,7 +884,7 @@ const ChartTitle = Object.assign<typeof _componentChartTitle, NestedComponentMet
 type IChartTitleSubtitleProps = React.PropsWithChildren<{
   font?: ChartsFont;
   offset?: number;
-  text?: string;
+  text?: string | undefined;
   textOverflow?: TextOverflow;
   wordWrap?: WordWrap;
 }>
@@ -1076,7 +1076,7 @@ type ICommonAxisSettingsProps = React.PropsWithChildren<{
   };
   minValueMargin?: number | undefined;
   opacity?: number | undefined;
-  placeholderSize?: number;
+  placeholderSize?: null | number;
   stripStyle?: Record<string, any> | {
     label?: Record<string, any> | {
       font?: ChartsFont;
@@ -2272,9 +2272,9 @@ type ILegendProps = React.PropsWithChildren<{
     subtitle?: Record<string, any> | string | {
       font?: ChartsFont;
       offset?: number;
-      text?: string;
+      text?: string | undefined;
     };
-    text?: string;
+    text?: string | undefined;
     verticalAlignment?: VerticalEdge;
   };
   verticalAlignment?: VerticalEdge;
@@ -2323,9 +2323,9 @@ type ILegendTitleProps = React.PropsWithChildren<{
   subtitle?: Record<string, any> | string | {
     font?: ChartsFont;
     offset?: number;
-    text?: string;
+    text?: string | undefined;
   };
-  text?: string;
+  text?: string | undefined;
   verticalAlignment?: VerticalEdge;
 }>
 const _componentLegendTitle = (props: ILegendTitleProps) => {
@@ -2352,7 +2352,7 @@ const LegendTitle = Object.assign<typeof _componentLegendTitle, NestedComponentM
 type ILegendTitleSubtitleProps = React.PropsWithChildren<{
   font?: ChartsFont;
   offset?: number;
-  text?: string;
+  text?: string | undefined;
 }>
 const _componentLegendTitleSubtitle = (props: ILegendTitleSubtitleProps) => {
   return React.createElement(NestedOption<ILegendTitleSubtitleProps>, {
@@ -3285,7 +3285,7 @@ const StripStyleLabel = Object.assign<typeof _componentStripStyleLabel, NestedCo
 type ISubtitleProps = React.PropsWithChildren<{
   font?: ChartsFont;
   offset?: number;
-  text?: string;
+  text?: string | undefined;
   textOverflow?: TextOverflow;
   wordWrap?: WordWrap;
 }>
@@ -3380,7 +3380,7 @@ type ITitleProps = React.PropsWithChildren<{
   subtitle?: Record<string, any> | string | {
     font?: ChartsFont;
     offset?: number;
-    text?: string;
+    text?: string | undefined;
     textOverflow?: TextOverflow;
     wordWrap?: WordWrap;
   };
@@ -3516,7 +3516,7 @@ type IValueAxisProps = React.PropsWithChildren<{
   allowDecimals?: boolean | undefined;
   autoBreaksEnabled?: boolean;
   axisDivisionFactor?: number;
-  breaks?: Array<ScaleBreak> | {
+  breaks?: Array<ScaleBreak> | undefined | {
     endValue?: Date | number | string | undefined;
     startValue?: Date | number | string | undefined;
   }[];
@@ -3633,7 +3633,7 @@ type IValueAxisProps = React.PropsWithChildren<{
   offset?: number | undefined;
   opacity?: number | undefined;
   pane?: string | undefined;
-  placeholderSize?: number;
+  placeholderSize?: null | number;
   position?: Position;
   showZero?: boolean | undefined;
   strips?: Array<Record<string, any>> | {
diff --git a/packages/devextreme-react/src/chat.ts b/packages/devextreme-react/src/chat.ts
index 9a88e3b7414a..b536ca714887 100644
--- a/packages/devextreme-react/src/chat.ts
+++ b/packages/devextreme-react/src/chat.ts
@@ -297,20 +297,20 @@ type IFileUploaderOptionsProps = React.PropsWithChildren<{
   minFileSize?: number;
   multiple?: boolean;
   name?: string;
-  onBeforeSend?: ((e: BeforeSendEvent) => void);
+  onBeforeSend?: ((e: BeforeSendEvent) => void) | undefined;
   onContentReady?: ((e: ContentReadyEvent) => void);
   onDisposing?: ((e: FileUploaderDisposingEvent) => void);
-  onDropZoneEnter?: ((e: DropZoneEnterEvent) => void);
-  onDropZoneLeave?: ((e: DropZoneLeaveEvent) => void);
-  onFilesUploaded?: ((e: FilesUploadedEvent) => void);
+  onDropZoneEnter?: ((e: DropZoneEnterEvent) => void) | undefined;
+  onDropZoneLeave?: ((e: DropZoneLeaveEvent) => void) | undefined;
+  onFilesUploaded?: ((e: FilesUploadedEvent) => void) | undefined;
   onInitialized?: ((e: FileUploaderInitializedEvent) => void);
   onOptionChanged?: ((e: OptionChangedEvent) => void);
-  onProgress?: ((e: ProgressEvent) => void);
-  onUploadAborted?: ((e: UploadAbortedEvent) => void);
-  onUploaded?: ((e: UploadedEvent) => void);
-  onUploadError?: ((e: UploadErrorEvent) => void);
-  onUploadStarted?: ((e: UploadStartedEvent) => void);
-  onValueChanged?: ((e: ValueChangedEvent) => void);
+  onProgress?: ((e: ProgressEvent) => void) | undefined;
+  onUploadAborted?: ((e: UploadAbortedEvent) => void) | undefined;
+  onUploaded?: ((e: UploadedEvent) => void) | undefined;
+  onUploadError?: ((e: UploadErrorEvent) => void) | undefined;
+  onUploadStarted?: ((e: UploadStartedEvent) => void) | undefined;
+  onValueChanged?: ((e: ValueChangedEvent) => void) | undefined;
   progress?: number;
   readOnly?: boolean;
   readyToUploadMessage?: string;
@@ -329,8 +329,8 @@ type IFileUploaderOptionsProps = React.PropsWithChildren<{
   uploadMethod?: UploadHttpMethod;
   uploadMode?: FileUploadMode;
   uploadUrl?: string;
-  validationError?: any;
-  validationErrors?: Array<any>;
+  validationError?: any | null;
+  validationErrors?: Array<any> | null;
   validationStatus?: ValidationStatus;
   value?: Array<any>;
   visible?: boolean;
@@ -532,9 +532,9 @@ type ISuggestionsProps = React.PropsWithChildren<{
   onContentReady?: ((e: ButtonGroupContentReadyEvent) => void);
   onDisposing?: ((e: ButtonGroupDisposingEvent) => void);
   onInitialized?: ((e: ButtonGroupInitializedEvent) => void);
-  onItemClick?: ((e: ItemClickEvent) => void);
+  onItemClick?: ((e: ItemClickEvent) => void) | undefined;
   onOptionChanged?: ((e: ButtonGroupOptionChangedEvent) => void);
-  onSelectionChanged?: ((e: SelectionChangedEvent) => void);
+  onSelectionChanged?: ((e: SelectionChangedEvent) => void) | undefined;
   rtlEnabled?: boolean;
   selectedItemKeys?: Array<any>;
   selectedItems?: Array<any>;
diff --git a/packages/devextreme-react/src/check-box.ts b/packages/devextreme-react/src/check-box.ts
index 1e25a211fc80..36fdb4a50695 100644
--- a/packages/devextreme-react/src/check-box.ts
+++ b/packages/devextreme-react/src/check-box.ts
@@ -21,8 +21,8 @@ type ICheckBoxOptionsNarrowedEvents = {
 }
 
 type ICheckBoxOptions = React.PropsWithChildren<ReplaceFieldTypes<Properties, ICheckBoxOptionsNarrowedEvents> & IHtmlOptions & {
-  defaultValue?: boolean | null | undefined;
-  onValueChange?: (value: boolean | null | undefined) => void;
+  defaultValue?: boolean | null;
+  onValueChange?: (value: boolean | null) => void;
 }>
 
 interface CheckBoxRef {
diff --git a/packages/devextreme-react/src/circular-gauge.ts b/packages/devextreme-react/src/circular-gauge.ts
index 85c4d650ecb4..8610e11f92e1 100644
--- a/packages/devextreme-react/src/circular-gauge.ts
+++ b/packages/devextreme-react/src/circular-gauge.ts
@@ -33,10 +33,10 @@ type ICircularGaugeOptions = React.PropsWithChildren<ReplaceFieldTypes<Propertie
   centerRender?: (...params: any) => React.ReactNode;
   centerComponent?: React.ComponentType<any>;
   defaultLoadingIndicator?: Record<string, any>;
-  defaultSubvalues?: Array<number>;
+  defaultSubvalues?: Array<number> | undefined;
   defaultValue?: number | undefined;
   onLoadingIndicatorChange?: (value: Record<string, any>) => void;
-  onSubvaluesChange?: (value: Array<number>) => void;
+  onSubvaluesChange?: (value: Array<number> | undefined) => void;
   onValueChange?: (value: number | undefined) => void;
 }>
 
@@ -445,8 +445,8 @@ const RangeContainer = Object.assign<typeof _componentRangeContainer, NestedComp
 // CircularGauge
 type IScaleProps = React.PropsWithChildren<{
   allowDecimals?: boolean | undefined;
-  customMinorTicks?: Array<number>;
-  customTicks?: Array<number>;
+  customMinorTicks?: Array<number> | undefined;
+  customTicks?: Array<number> | undefined;
   endValue?: number;
   label?: Record<string, any> | {
     customizeText?: ((scaleValue: { value: number, valueText: string }) => string);
@@ -542,7 +542,7 @@ const Size = Object.assign<typeof _componentSize, NestedComponentMeta>(_componen
 type ISubtitleProps = React.PropsWithChildren<{
   font?: ChartsFont;
   offset?: number;
-  text?: string;
+  text?: string | undefined;
   textOverflow?: TextOverflow;
   wordWrap?: WordWrap;
 }>
@@ -670,11 +670,11 @@ type ITitleProps = React.PropsWithChildren<{
   subtitle?: Record<string, any> | string | {
     font?: ChartsFont;
     offset?: number;
-    text?: string;
+    text?: string | undefined;
     textOverflow?: TextOverflow;
     wordWrap?: WordWrap;
   };
-  text?: string;
+  text?: string | undefined;
   textOverflow?: TextOverflow;
   verticalAlignment?: VerticalEdge;
   wordWrap?: WordWrap;
diff --git a/packages/devextreme-react/src/color-box.ts b/packages/devextreme-react/src/color-box.ts
index b696bc08227b..8f2a589509b7 100644
--- a/packages/devextreme-react/src/color-box.ts
+++ b/packages/devextreme-react/src/color-box.ts
@@ -248,18 +248,18 @@ type IDropDownOptionsProps = React.PropsWithChildren<{
   maxWidth?: number | string;
   minHeight?: number | string;
   minWidth?: number | string;
-  onContentReady?: ((e: EventInfo<any>) => void);
-  onDisposing?: ((e: EventInfo<any>) => void);
+  onContentReady?: ((e: EventInfo<any>) => void) | undefined;
+  onDisposing?: ((e: EventInfo<any>) => void) | undefined;
   onHidden?: ((e: EventInfo<any>) => void);
   onHiding?: ((e: { cancel: boolean | any, component: dxOverlay<any>, element: any, model: any }) => void);
-  onInitialized?: ((e: { component: Component<any>, element: any }) => void);
-  onOptionChanged?: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void);
-  onResize?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void);
-  onResizeEnd?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void);
-  onResizeStart?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void);
+  onInitialized?: ((e: { component: Component<any>, element: any }) => void) | undefined;
+  onOptionChanged?: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) | undefined;
+  onResize?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined;
+  onResizeEnd?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined;
+  onResizeStart?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined;
   onShowing?: ((e: { cancel: boolean | any, component: dxOverlay<any>, element: any, model: any }) => void);
   onShown?: ((e: EventInfo<any>) => void);
-  onTitleRendered?: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void);
+  onTitleRendered?: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) | undefined;
   position?: (() => void) | PositionAlignment | PositionConfig;
   resizeEnabled?: boolean;
   restorePosition?: boolean;
@@ -461,7 +461,7 @@ type IOptionsProps = React.PropsWithChildren<{
   hint?: string | undefined;
   hoverStateEnabled?: boolean;
   icon?: string;
-  onClick?: ((e: ClickEvent) => void);
+  onClick?: ((e: ClickEvent) => void) | undefined;
   onContentReady?: ((e: ContentReadyEvent) => void);
   onDisposing?: ((e: ButtonDisposingEvent) => void);
   onInitialized?: ((e: ButtonInitializedEvent) => void);
diff --git a/packages/devextreme-react/src/context-menu.ts b/packages/devextreme-react/src/context-menu.ts
index acd941a2d38f..469f61ea34ae 100644
--- a/packages/devextreme-react/src/context-menu.ts
+++ b/packages/devextreme-react/src/context-menu.ts
@@ -21,15 +21,15 @@ type ReplaceFieldTypes<TSource, TReplacement> = {
 type IContextMenuOptionsNarrowedEvents<TItem = any, TKey = any> = {
   onContentReady?: ((e: ContentReadyEvent<TItem, TKey>) => void);
   onDisposing?: ((e: DisposingEvent<TItem, TKey>) => void);
-  onHidden?: ((e: HiddenEvent<TItem, TKey>) => void);
-  onHiding?: ((e: HidingEvent<TItem, TKey>) => void);
+  onHidden?: ((e: HiddenEvent<TItem, TKey>) => void) | undefined;
+  onHiding?: ((e: HidingEvent<TItem, TKey>) => void) | undefined;
   onInitialized?: ((e: InitializedEvent<TItem, TKey>) => void);
   onItemClick?: ((e: ItemClickEvent<TItem, TKey>) => void);
   onItemContextMenu?: ((e: ItemContextMenuEvent<TItem, TKey>) => void);
   onItemRendered?: ((e: ItemRenderedEvent<TItem, TKey>) => void);
-  onPositioning?: ((e: PositioningEvent<TItem, TKey>) => void);
-  onShowing?: ((e: ShowingEvent<TItem, TKey>) => void);
-  onShown?: ((e: ShownEvent<TItem, TKey>) => void);
+  onPositioning?: ((e: PositioningEvent<TItem, TKey>) => void) | undefined;
+  onShowing?: ((e: ShowingEvent<TItem, TKey>) => void) | undefined;
+  onShown?: ((e: ShownEvent<TItem, TKey>) => void) | undefined;
 }
 
 type IContextMenuOptions<TItem = any, TKey = any> = React.PropsWithChildren<ReplaceFieldTypes<Properties<TItem, TKey>, IContextMenuOptionsNarrowedEvents<TItem, TKey>> & IHtmlOptions & {
@@ -37,10 +37,10 @@ type IContextMenuOptions<TItem = any, TKey = any> = React.PropsWithChildren<Repl
   itemRender?: (...params: any) => React.ReactNode;
   itemComponent?: React.ComponentType<any>;
   defaultItems?: Array<any | dxContextMenuItem>;
-  defaultSelectedItem?: any;
+  defaultSelectedItem?: any | null;
   defaultVisible?: boolean;
   onItemsChange?: (value: Array<any | dxContextMenuItem>) => void;
-  onSelectedItemChange?: (value: any) => void;
+  onSelectedItemChange?: (value: any | null) => void;
   onVisibleChange?: (value: boolean) => void;
 }>
 
diff --git a/packages/devextreme-react/src/data-grid.ts b/packages/devextreme-react/src/data-grid.ts
index 285e527e5e4d..f8c169f9288b 100644
--- a/packages/devextreme-react/src/data-grid.ts
+++ b/packages/devextreme-react/src/data-grid.ts
@@ -461,7 +461,7 @@ type IButtonOptionsProps = React.PropsWithChildren<{
   hint?: string | undefined;
   hoverStateEnabled?: boolean;
   icon?: string;
-  onClick?: ((e: ClickEvent) => void);
+  onClick?: ((e: ClickEvent) => void) | undefined;
   onContentReady?: ((e: ButtonContentReadyEvent) => void);
   onDisposing?: ((e: ButtonDisposingEvent) => void);
   onInitialized?: ((e: ButtonInitializedEvent) => void);
@@ -1308,7 +1308,7 @@ const EditingTexts = Object.assign<typeof _componentEditingTexts, NestedComponen
 type IEditorOptionsProps = React.PropsWithChildren<{
   accessKey?: string | undefined;
   activeStateEnabled?: boolean;
-  buttons?: Array<string | TextBoxPredefinedButton | TextEditorButton>;
+  buttons?: Array<string | TextBoxPredefinedButton | TextEditorButton> | undefined;
   disabled?: boolean;
   elementAttr?: Record<string, any>;
   focusStateEnabled?: boolean;
@@ -1324,7 +1324,7 @@ type IEditorOptionsProps = React.PropsWithChildren<{
   maskChar?: string;
   maskInvalidMessage?: string;
   maskRules?: any;
-  maxLength?: number | string;
+  maxLength?: null | number | string;
   mode?: TextBoxType;
   name?: string;
   onChange?: ((e: ChangeEvent) => void);
@@ -1352,8 +1352,8 @@ type IEditorOptionsProps = React.PropsWithChildren<{
   tabIndex?: number;
   text?: string;
   useMaskedValue?: boolean;
-  validationError?: any;
-  validationErrors?: Array<any>;
+  validationError?: any | null;
+  validationErrors?: Array<any> | null;
   validationMessageMode?: ValidationMessageMode;
   validationMessagePosition?: CommonPosition;
   validationStatus?: ValidationStatus;
@@ -1680,18 +1680,18 @@ type IFilterBuilderPopupProps = React.PropsWithChildren<{
   maxWidth?: number | string;
   minHeight?: number | string;
   minWidth?: number | string;
-  onContentReady?: ((e: EventInfo<any>) => void);
-  onDisposing?: ((e: EventInfo<any>) => void);
+  onContentReady?: ((e: EventInfo<any>) => void) | undefined;
+  onDisposing?: ((e: EventInfo<any>) => void) | undefined;
   onHidden?: ((e: EventInfo<any>) => void);
   onHiding?: ((e: { cancel: boolean | any, component: dxOverlay<any>, element: any, model: any }) => void);
-  onInitialized?: ((e: { component: Component<any>, element: any }) => void);
-  onOptionChanged?: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void);
-  onResize?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void);
-  onResizeEnd?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void);
-  onResizeStart?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void);
+  onInitialized?: ((e: { component: Component<any>, element: any }) => void) | undefined;
+  onOptionChanged?: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) | undefined;
+  onResize?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined;
+  onResizeEnd?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined;
+  onResizeStart?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined;
   onShowing?: ((e: { cancel: boolean | any, component: dxOverlay<any>, element: any, model: any }) => void);
   onShown?: ((e: EventInfo<any>) => void);
-  onTitleRendered?: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void);
+  onTitleRendered?: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) | undefined;
   position?: (() => void) | PositionAlignment | PositionConfig;
   resizeEnabled?: boolean;
   restorePosition?: boolean;
@@ -1905,12 +1905,12 @@ type IFormProps = React.PropsWithChildren<{
   minColWidth?: number;
   onContentReady?: ((e: FormContentReadyEvent) => void);
   onDisposing?: ((e: FormDisposingEvent) => void);
-  onEditorEnterKey?: ((e: EditorEnterKeyEvent) => void);
-  onFieldDataChanged?: ((e: FieldDataChangedEvent) => void);
+  onEditorEnterKey?: ((e: EditorEnterKeyEvent) => void) | undefined;
+  onFieldDataChanged?: ((e: FieldDataChangedEvent) => void) | undefined;
   onInitialized?: ((e: FormInitializedEvent) => void);
   onOptionChanged?: ((e: FormOptionChangedEvent) => void);
-  onSmartPasted?: ((e: SmartPastedEvent) => void);
-  onSmartPasting?: ((e: SmartPastingEvent) => void);
+  onSmartPasted?: ((e: SmartPastedEvent) => void) | undefined;
+  onSmartPasting?: ((e: SmartPastingEvent) => void) | undefined;
   optionalMark?: string;
   readOnly?: boolean;
   requiredMark?: string;
@@ -2730,7 +2730,7 @@ type IOptionsProps = React.PropsWithChildren<{
   hint?: string | undefined;
   hoverStateEnabled?: boolean;
   icon?: string;
-  onClick?: ((e: ClickEvent) => void);
+  onClick?: ((e: ClickEvent) => void) | undefined;
   onContentReady?: ((e: ContentReadyEvent) => void);
   onDisposing?: ((e: DisposingEvent) => void);
   onInitialized?: ((e: InitializedEvent) => void);
@@ -2874,18 +2874,18 @@ type IPopupProps = React.PropsWithChildren<{
   maxWidth?: number | string;
   minHeight?: number | string;
   minWidth?: number | string;
-  onContentReady?: ((e: EventInfo<any>) => void);
-  onDisposing?: ((e: EventInfo<any>) => void);
+  onContentReady?: ((e: EventInfo<any>) => void) | undefined;
+  onDisposing?: ((e: EventInfo<any>) => void) | undefined;
   onHidden?: ((e: EventInfo<any>) => void);
   onHiding?: ((e: { cancel: boolean | any, component: dxOverlay<any>, element: any, model: any }) => void);
-  onInitialized?: ((e: { component: Component<any>, element: any }) => void);
-  onOptionChanged?: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void);
-  onResize?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void);
-  onResizeEnd?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void);
-  onResizeStart?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void);
+  onInitialized?: ((e: { component: Component<any>, element: any }) => void) | undefined;
+  onOptionChanged?: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) | undefined;
+  onResize?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined;
+  onResizeEnd?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined;
+  onResizeStart?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined;
   onShowing?: ((e: { cancel: boolean | any, component: dxOverlay<any>, element: any, model: any }) => void);
   onShown?: ((e: EventInfo<any>) => void);
-  onTitleRendered?: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void);
+  onTitleRendered?: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) | undefined;
   position?: (() => void) | PositionAlignment | PositionConfig;
   resizeEnabled?: boolean;
   restorePosition?: boolean;
@@ -3645,14 +3645,14 @@ type ITabPanelOptionsProps = React.PropsWithChildren<{
   onSelectionChanged?: ((e: SelectionChangedEvent) => void);
   onSelectionChanging?: ((e: SelectionChangingEvent) => void);
   onTitleClick?: ((e: TitleClickEvent) => void);
-  onTitleHold?: ((e: TitleHoldEvent) => void);
-  onTitleRendered?: ((e: TitleRenderedEvent) => void);
+  onTitleHold?: ((e: TitleHoldEvent) => void) | undefined;
+  onTitleRendered?: ((e: TitleRenderedEvent) => void) | undefined;
   repaintChangesOnly?: boolean;
   rtlEnabled?: boolean;
   scrollByContent?: boolean;
   scrollingEnabled?: boolean;
   selectedIndex?: number;
-  selectedItem?: any;
+  selectedItem?: any | null;
   showNavButtons?: boolean;
   stylingMode?: TabsStyle;
   swipeEnabled?: boolean;
@@ -3664,8 +3664,8 @@ type ITabPanelOptionsProps = React.PropsWithChildren<{
   onItemsChange?: (value: Array<any | dxTabPanelItem | string>) => void;
   defaultSelectedIndex?: number;
   onSelectedIndexChange?: (value: number) => void;
-  defaultSelectedItem?: any;
-  onSelectedItemChange?: (value: any) => void;
+  defaultSelectedItem?: any | null;
+  onSelectedItemChange?: (value: any | null) => void;
   itemRender?: (...params: any) => React.ReactNode;
   itemComponent?: React.ComponentType<any>;
   itemTitleRender?: (...params: any) => React.ReactNode;
diff --git a/packages/devextreme-react/src/date-box.ts b/packages/devextreme-react/src/date-box.ts
index 6e7880649947..565ccdbb3504 100644
--- a/packages/devextreme-react/src/date-box.ts
+++ b/packages/devextreme-react/src/date-box.ts
@@ -207,7 +207,7 @@ type ICalendarOptionsProps = React.PropsWithChildren<{
   cellTemplate?: ((itemData: { date: Date, text: string, view: string }, itemIndex: number, itemElement: any) => string | any) | template;
   dateSerializationFormat?: string | undefined;
   disabled?: boolean;
-  disabledDates?: Array<Date> | ((data: DisabledDate) => boolean);
+  disabledDates?: Array<Date> | ((data: DisabledDate) => boolean) | null;
   elementAttr?: Record<string, any>;
   firstDayOfWeek?: DayOfWeek | undefined;
   focusStateEnabled?: boolean;
@@ -233,8 +233,8 @@ type ICalendarOptionsProps = React.PropsWithChildren<{
   showWeekNumbers?: boolean;
   tabIndex?: number;
   todayButtonText?: string;
-  validationError?: any;
-  validationErrors?: Array<any>;
+  validationError?: any | null;
+  validationErrors?: Array<any> | null;
   validationMessageMode?: ValidationMessageMode;
   validationMessagePosition?: CommonPosition;
   validationStatus?: ValidationStatus;
@@ -341,18 +341,18 @@ type IDropDownOptionsProps = React.PropsWithChildren<{
   maxWidth?: number | string;
   minHeight?: number | string;
   minWidth?: number | string;
-  onContentReady?: ((e: EventInfo<any>) => void);
-  onDisposing?: ((e: EventInfo<any>) => void);
+  onContentReady?: ((e: EventInfo<any>) => void) | undefined;
+  onDisposing?: ((e: EventInfo<any>) => void) | undefined;
   onHidden?: ((e: EventInfo<any>) => void);
   onHiding?: ((e: { cancel: boolean | any, component: dxOverlay<any>, element: any, model: any }) => void);
-  onInitialized?: ((e: { component: Component<any>, element: any }) => void);
-  onOptionChanged?: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void);
-  onResize?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void);
-  onResizeEnd?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void);
-  onResizeStart?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void);
+  onInitialized?: ((e: { component: Component<any>, element: any }) => void) | undefined;
+  onOptionChanged?: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) | undefined;
+  onResize?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined;
+  onResizeEnd?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined;
+  onResizeStart?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined;
   onShowing?: ((e: { cancel: boolean | any, component: dxOverlay<any>, element: any, model: any }) => void);
   onShown?: ((e: EventInfo<any>) => void);
-  onTitleRendered?: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void);
+  onTitleRendered?: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) | undefined;
   position?: (() => void) | PositionAlignment | PositionConfig;
   resizeEnabled?: boolean;
   restorePosition?: boolean;
@@ -522,7 +522,7 @@ type IOptionsProps = React.PropsWithChildren<{
   hint?: string | undefined;
   hoverStateEnabled?: boolean;
   icon?: string;
-  onClick?: ((e: ClickEvent) => void);
+  onClick?: ((e: ClickEvent) => void) | undefined;
   onContentReady?: ((e: ButtonContentReadyEvent) => void);
   onDisposing?: ((e: ButtonDisposingEvent) => void);
   onInitialized?: ((e: ButtonInitializedEvent) => void);
diff --git a/packages/devextreme-react/src/date-range-box.ts b/packages/devextreme-react/src/date-range-box.ts
index c50293fffbf2..a52af5e8f715 100644
--- a/packages/devextreme-react/src/date-range-box.ts
+++ b/packages/devextreme-react/src/date-range-box.ts
@@ -212,7 +212,7 @@ type ICalendarOptionsProps = React.PropsWithChildren<{
   cellTemplate?: ((itemData: { date: Date, text: string, view: string }, itemIndex: number, itemElement: any) => string | any) | template;
   dateSerializationFormat?: string | undefined;
   disabled?: boolean;
-  disabledDates?: Array<Date> | ((data: DisabledDate) => boolean);
+  disabledDates?: Array<Date> | ((data: DisabledDate) => boolean) | null;
   elementAttr?: Record<string, any>;
   firstDayOfWeek?: DayOfWeek | undefined;
   focusStateEnabled?: boolean;
@@ -238,8 +238,8 @@ type ICalendarOptionsProps = React.PropsWithChildren<{
   showWeekNumbers?: boolean;
   tabIndex?: number;
   todayButtonText?: string;
-  validationError?: any;
-  validationErrors?: Array<any>;
+  validationError?: any | null;
+  validationErrors?: Array<any> | null;
   validationMessageMode?: ValidationMessageMode;
   validationMessagePosition?: CommonPosition;
   validationStatus?: ValidationStatus;
@@ -346,18 +346,18 @@ type IDropDownOptionsProps = React.PropsWithChildren<{
   maxWidth?: number | string;
   minHeight?: number | string;
   minWidth?: number | string;
-  onContentReady?: ((e: EventInfo<any>) => void);
-  onDisposing?: ((e: EventInfo<any>) => void);
+  onContentReady?: ((e: EventInfo<any>) => void) | undefined;
+  onDisposing?: ((e: EventInfo<any>) => void) | undefined;
   onHidden?: ((e: EventInfo<any>) => void);
   onHiding?: ((e: { cancel: boolean | any, component: dxOverlay<any>, element: any, model: any }) => void);
-  onInitialized?: ((e: { component: Component<any>, element: any }) => void);
-  onOptionChanged?: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void);
-  onResize?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void);
-  onResizeEnd?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void);
-  onResizeStart?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void);
+  onInitialized?: ((e: { component: Component<any>, element: any }) => void) | undefined;
+  onOptionChanged?: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) | undefined;
+  onResize?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined;
+  onResizeEnd?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined;
+  onResizeStart?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined;
   onShowing?: ((e: { cancel: boolean | any, component: dxOverlay<any>, element: any, model: any }) => void);
   onShown?: ((e: EventInfo<any>) => void);
-  onTitleRendered?: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void);
+  onTitleRendered?: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) | undefined;
   position?: (() => void) | PositionAlignment | PositionConfig;
   resizeEnabled?: boolean;
   restorePosition?: boolean;
@@ -527,7 +527,7 @@ type IOptionsProps = React.PropsWithChildren<{
   hint?: string | undefined;
   hoverStateEnabled?: boolean;
   icon?: string;
-  onClick?: ((e: ClickEvent) => void);
+  onClick?: ((e: ClickEvent) => void) | undefined;
   onContentReady?: ((e: ButtonContentReadyEvent) => void);
   onDisposing?: ((e: ButtonDisposingEvent) => void);
   onInitialized?: ((e: ButtonInitializedEvent) => void);
diff --git a/packages/devextreme-react/src/diagram.ts b/packages/devextreme-react/src/diagram.ts
index 94c717cb9610..0adfd2e87f50 100644
--- a/packages/devextreme-react/src/diagram.ts
+++ b/packages/devextreme-react/src/diagram.ts
@@ -25,10 +25,10 @@ type IDiagramOptionsNarrowedEvents = {
   onCustomCommand?: ((e: CustomCommandEvent) => void);
   onDisposing?: ((e: DisposingEvent) => void);
   onInitialized?: ((e: InitializedEvent) => void);
-  onItemClick?: ((e: ItemClickEvent) => void);
-  onItemDblClick?: ((e: ItemDblClickEvent) => void);
-  onRequestEditOperation?: ((e: RequestEditOperationEvent) => void);
-  onRequestLayoutUpdate?: ((e: RequestLayoutUpdateEvent) => void);
+  onItemClick?: ((e: ItemClickEvent) => void) | undefined;
+  onItemDblClick?: ((e: ItemDblClickEvent) => void) | undefined;
+  onRequestEditOperation?: ((e: RequestEditOperationEvent) => void) | undefined;
+  onRequestLayoutUpdate?: ((e: RequestLayoutUpdateEvent) => void) | undefined;
 }
 
 type IDiagramOptions = React.PropsWithChildren<ReplaceFieldTypes<Properties, IDiagramOptionsNarrowedEvents> & IHtmlOptions & {
diff --git a/packages/devextreme-react/src/drop-down-box.ts b/packages/devextreme-react/src/drop-down-box.ts
index 05222546cc2f..25d37db6e3b2 100644
--- a/packages/devextreme-react/src/drop-down-box.ts
+++ b/packages/devextreme-react/src/drop-down-box.ts
@@ -252,18 +252,18 @@ type IDropDownOptionsProps = React.PropsWithChildren<{
   maxWidth?: number | string;
   minHeight?: number | string;
   minWidth?: number | string;
-  onContentReady?: ((e: EventInfo<any>) => void);
-  onDisposing?: ((e: EventInfo<any>) => void);
+  onContentReady?: ((e: EventInfo<any>) => void) | undefined;
+  onDisposing?: ((e: EventInfo<any>) => void) | undefined;
   onHidden?: ((e: EventInfo<any>) => void);
   onHiding?: ((e: { cancel: boolean | any, component: dxOverlay<any>, element: any, model: any }) => void);
-  onInitialized?: ((e: { component: Component<any>, element: any }) => void);
-  onOptionChanged?: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void);
-  onResize?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void);
-  onResizeEnd?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void);
-  onResizeStart?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void);
+  onInitialized?: ((e: { component: Component<any>, element: any }) => void) | undefined;
+  onOptionChanged?: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) | undefined;
+  onResize?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined;
+  onResizeEnd?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined;
+  onResizeStart?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined;
   onShowing?: ((e: { cancel: boolean | any, component: dxOverlay<any>, element: any, model: any }) => void);
   onShown?: ((e: EventInfo<any>) => void);
-  onTitleRendered?: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void);
+  onTitleRendered?: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) | undefined;
   position?: (() => void) | PositionAlignment | PositionConfig;
   resizeEnabled?: boolean;
   restorePosition?: boolean;
@@ -465,7 +465,7 @@ type IOptionsProps = React.PropsWithChildren<{
   hint?: string | undefined;
   hoverStateEnabled?: boolean;
   icon?: string;
-  onClick?: ((e: ClickEvent) => void);
+  onClick?: ((e: ClickEvent) => void) | undefined;
   onContentReady?: ((e: ContentReadyEvent) => void);
   onDisposing?: ((e: ButtonDisposingEvent) => void);
   onInitialized?: ((e: ButtonInitializedEvent) => void);
diff --git a/packages/devextreme-react/src/drop-down-button.ts b/packages/devextreme-react/src/drop-down-button.ts
index 528e0d883b23..bf41717ebb69 100644
--- a/packages/devextreme-react/src/drop-down-button.ts
+++ b/packages/devextreme-react/src/drop-down-button.ts
@@ -207,18 +207,18 @@ type IDropDownOptionsProps = React.PropsWithChildren<{
   maxWidth?: number | string;
   minHeight?: number | string;
   minWidth?: number | string;
-  onContentReady?: ((e: EventInfo<any>) => void);
-  onDisposing?: ((e: EventInfo<any>) => void);
+  onContentReady?: ((e: EventInfo<any>) => void) | undefined;
+  onDisposing?: ((e: EventInfo<any>) => void) | undefined;
   onHidden?: ((e: EventInfo<any>) => void);
   onHiding?: ((e: { cancel: boolean | any, component: dxOverlay<any>, element: any, model: any }) => void);
-  onInitialized?: ((e: { component: Component<any>, element: any }) => void);
-  onOptionChanged?: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void);
-  onResize?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void);
-  onResizeEnd?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void);
-  onResizeStart?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void);
+  onInitialized?: ((e: { component: Component<any>, element: any }) => void) | undefined;
+  onOptionChanged?: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) | undefined;
+  onResize?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined;
+  onResizeEnd?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined;
+  onResizeStart?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined;
   onShowing?: ((e: { cancel: boolean | any, component: dxOverlay<any>, element: any, model: any }) => void);
   onShown?: ((e: EventInfo<any>) => void);
-  onTitleRendered?: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void);
+  onTitleRendered?: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) | undefined;
   position?: (() => void) | PositionAlignment | PositionConfig;
   resizeEnabled?: boolean;
   restorePosition?: boolean;
diff --git a/packages/devextreme-react/src/file-manager.ts b/packages/devextreme-react/src/file-manager.ts
index 72d11a9b0ad3..cae587360121 100644
--- a/packages/devextreme-react/src/file-manager.ts
+++ b/packages/devextreme-react/src/file-manager.ts
@@ -18,25 +18,25 @@ type ReplaceFieldTypes<TSource, TReplacement> = {
 
 type IFileManagerOptionsNarrowedEvents = {
   onContentReady?: ((e: ContentReadyEvent) => void);
-  onContextMenuItemClick?: ((e: ContextMenuItemClickEvent) => void);
-  onContextMenuShowing?: ((e: ContextMenuShowingEvent) => void);
-  onDirectoryCreated?: ((e: DirectoryCreatedEvent) => void);
-  onDirectoryCreating?: ((e: DirectoryCreatingEvent) => void);
+  onContextMenuItemClick?: ((e: ContextMenuItemClickEvent) => void) | undefined;
+  onContextMenuShowing?: ((e: ContextMenuShowingEvent) => void) | undefined;
+  onDirectoryCreated?: ((e: DirectoryCreatedEvent) => void) | undefined;
+  onDirectoryCreating?: ((e: DirectoryCreatingEvent) => void) | undefined;
   onDisposing?: ((e: DisposingEvent) => void);
-  onErrorOccurred?: ((e: ErrorOccurredEvent) => void);
-  onFileUploaded?: ((e: FileUploadedEvent) => void);
-  onFileUploading?: ((e: FileUploadingEvent) => void);
+  onErrorOccurred?: ((e: ErrorOccurredEvent) => void) | undefined;
+  onFileUploaded?: ((e: FileUploadedEvent) => void) | undefined;
+  onFileUploading?: ((e: FileUploadingEvent) => void) | undefined;
   onInitialized?: ((e: InitializedEvent) => void);
-  onItemCopied?: ((e: ItemCopiedEvent) => void);
-  onItemCopying?: ((e: ItemCopyingEvent) => void);
-  onItemDeleted?: ((e: ItemDeletedEvent) => void);
-  onItemDeleting?: ((e: ItemDeletingEvent) => void);
-  onItemDownloading?: ((e: ItemDownloadingEvent) => void);
-  onItemMoved?: ((e: ItemMovedEvent) => void);
-  onItemMoving?: ((e: ItemMovingEvent) => void);
-  onItemRenamed?: ((e: ItemRenamedEvent) => void);
-  onItemRenaming?: ((e: ItemRenamingEvent) => void);
-  onSelectedFileOpened?: ((e: SelectedFileOpenedEvent) => void);
+  onItemCopied?: ((e: ItemCopiedEvent) => void) | undefined;
+  onItemCopying?: ((e: ItemCopyingEvent) => void) | undefined;
+  onItemDeleted?: ((e: ItemDeletedEvent) => void) | undefined;
+  onItemDeleting?: ((e: ItemDeletingEvent) => void) | undefined;
+  onItemDownloading?: ((e: ItemDownloadingEvent) => void) | undefined;
+  onItemMoved?: ((e: ItemMovedEvent) => void) | undefined;
+  onItemMoving?: ((e: ItemMovingEvent) => void) | undefined;
+  onItemRenamed?: ((e: ItemRenamedEvent) => void) | undefined;
+  onItemRenaming?: ((e: ItemRenamingEvent) => void) | undefined;
+  onSelectedFileOpened?: ((e: SelectedFileOpenedEvent) => void) | undefined;
   onToolbarItemClick?: ((e: ToolbarItemClickEvent) => void);
 }
 
diff --git a/packages/devextreme-react/src/file-uploader.ts b/packages/devextreme-react/src/file-uploader.ts
index c6e219b48d73..a788653dfe8b 100644
--- a/packages/devextreme-react/src/file-uploader.ts
+++ b/packages/devextreme-react/src/file-uploader.ts
@@ -14,19 +14,19 @@ type ReplaceFieldTypes<TSource, TReplacement> = {
 }
 
 type IFileUploaderOptionsNarrowedEvents = {
-  onBeforeSend?: ((e: BeforeSendEvent) => void);
+  onBeforeSend?: ((e: BeforeSendEvent) => void) | undefined;
   onContentReady?: ((e: ContentReadyEvent) => void);
   onDisposing?: ((e: DisposingEvent) => void);
-  onDropZoneEnter?: ((e: DropZoneEnterEvent) => void);
-  onDropZoneLeave?: ((e: DropZoneLeaveEvent) => void);
-  onFilesUploaded?: ((e: FilesUploadedEvent) => void);
+  onDropZoneEnter?: ((e: DropZoneEnterEvent) => void) | undefined;
+  onDropZoneLeave?: ((e: DropZoneLeaveEvent) => void) | undefined;
+  onFilesUploaded?: ((e: FilesUploadedEvent) => void) | undefined;
   onInitialized?: ((e: InitializedEvent) => void);
-  onProgress?: ((e: ProgressEvent) => void);
-  onUploadAborted?: ((e: UploadAbortedEvent) => void);
-  onUploaded?: ((e: UploadedEvent) => void);
-  onUploadError?: ((e: UploadErrorEvent) => void);
-  onUploadStarted?: ((e: UploadStartedEvent) => void);
-  onValueChanged?: ((e: ValueChangedEvent) => void);
+  onProgress?: ((e: ProgressEvent) => void) | undefined;
+  onUploadAborted?: ((e: UploadAbortedEvent) => void) | undefined;
+  onUploaded?: ((e: UploadedEvent) => void) | undefined;
+  onUploadError?: ((e: UploadErrorEvent) => void) | undefined;
+  onUploadStarted?: ((e: UploadStartedEvent) => void) | undefined;
+  onValueChanged?: ((e: ValueChangedEvent) => void) | undefined;
 }
 
 type IFileUploaderOptions = React.PropsWithChildren<ReplaceFieldTypes<Properties, IFileUploaderOptionsNarrowedEvents> & IHtmlOptions & {
diff --git a/packages/devextreme-react/src/form.ts b/packages/devextreme-react/src/form.ts
index 054218d9e6c6..cee44697237f 100644
--- a/packages/devextreme-react/src/form.ts
+++ b/packages/devextreme-react/src/form.ts
@@ -27,10 +27,10 @@ type ReplaceFieldTypes<TSource, TReplacement> = {
 type IFormOptionsNarrowedEvents = {
   onContentReady?: ((e: ContentReadyEvent) => void);
   onDisposing?: ((e: DisposingEvent) => void);
-  onEditorEnterKey?: ((e: EditorEnterKeyEvent) => void);
+  onEditorEnterKey?: ((e: EditorEnterKeyEvent) => void) | undefined;
   onInitialized?: ((e: InitializedEvent) => void);
-  onSmartPasted?: ((e: SmartPastedEvent) => void);
-  onSmartPasting?: ((e: SmartPastingEvent) => void);
+  onSmartPasted?: ((e: SmartPastedEvent) => void) | undefined;
+  onSmartPasting?: ((e: SmartPastingEvent) => void) | undefined;
 }
 
 type IFormOptions = React.PropsWithChildren<ReplaceFieldTypes<Properties, IFormOptionsNarrowedEvents> & IHtmlOptions & {
@@ -178,7 +178,7 @@ type IButtonOptionsProps = React.PropsWithChildren<{
   hint?: string | undefined;
   hoverStateEnabled?: boolean;
   icon?: string;
-  onClick?: ((e: ClickEvent) => void);
+  onClick?: ((e: ClickEvent) => void) | undefined;
   onContentReady?: ((e: ButtonContentReadyEvent) => void);
   onDisposing?: ((e: ButtonDisposingEvent) => void);
   onInitialized?: ((e: ButtonInitializedEvent) => void);
@@ -870,14 +870,14 @@ type ITabPanelOptionsProps = React.PropsWithChildren<{
   onSelectionChanged?: ((e: SelectionChangedEvent) => void);
   onSelectionChanging?: ((e: SelectionChangingEvent) => void);
   onTitleClick?: ((e: TitleClickEvent) => void);
-  onTitleHold?: ((e: TitleHoldEvent) => void);
-  onTitleRendered?: ((e: TitleRenderedEvent) => void);
+  onTitleHold?: ((e: TitleHoldEvent) => void) | undefined;
+  onTitleRendered?: ((e: TitleRenderedEvent) => void) | undefined;
   repaintChangesOnly?: boolean;
   rtlEnabled?: boolean;
   scrollByContent?: boolean;
   scrollingEnabled?: boolean;
   selectedIndex?: number;
-  selectedItem?: any;
+  selectedItem?: any | null;
   showNavButtons?: boolean;
   stylingMode?: TabsStyle;
   swipeEnabled?: boolean;
@@ -889,8 +889,8 @@ type ITabPanelOptionsProps = React.PropsWithChildren<{
   onItemsChange?: (value: Array<any | dxTabPanelItem | string>) => void;
   defaultSelectedIndex?: number;
   onSelectedIndexChange?: (value: number) => void;
-  defaultSelectedItem?: any;
-  onSelectedItemChange?: (value: any) => void;
+  defaultSelectedItem?: any | null;
+  onSelectedItemChange?: (value: any | null) => void;
   itemRender?: (...params: any) => React.ReactNode;
   itemComponent?: React.ComponentType<any>;
   itemTitleRender?: (...params: any) => React.ReactNode;
diff --git a/packages/devextreme-react/src/funnel.ts b/packages/devextreme-react/src/funnel.ts
index d81e56c35a6e..3ea5469bb050 100644
--- a/packages/devextreme-react/src/funnel.ts
+++ b/packages/devextreme-react/src/funnel.ts
@@ -249,11 +249,11 @@ type IFunnelTitleProps = React.PropsWithChildren<{
   subtitle?: Record<string, any> | string | {
     font?: ChartsFont;
     offset?: number;
-    text?: string;
+    text?: string | undefined;
     textOverflow?: TextOverflow;
     wordWrap?: WordWrap;
   };
-  text?: string;
+  text?: string | undefined;
   textOverflow?: TextOverflow;
   verticalAlignment?: VerticalEdge;
   wordWrap?: WordWrap;
@@ -282,7 +282,7 @@ const FunnelTitle = Object.assign<typeof _componentFunnelTitle, NestedComponentM
 type IFunnelTitleSubtitleProps = React.PropsWithChildren<{
   font?: ChartsFont;
   offset?: number;
-  text?: string;
+  text?: string | undefined;
   textOverflow?: TextOverflow;
   wordWrap?: WordWrap;
 }>
@@ -548,9 +548,9 @@ type ILegendProps = React.PropsWithChildren<{
     subtitle?: Record<string, any> | string | {
       font?: ChartsFont;
       offset?: number;
-      text?: string;
+      text?: string | undefined;
     };
-    text?: string;
+    text?: string | undefined;
     verticalAlignment?: VerticalEdge;
   };
   verticalAlignment?: VerticalEdge;
@@ -622,9 +622,9 @@ type ILegendTitleProps = React.PropsWithChildren<{
   subtitle?: Record<string, any> | string | {
     font?: ChartsFont;
     offset?: number;
-    text?: string;
+    text?: string | undefined;
   };
-  text?: string;
+  text?: string | undefined;
   verticalAlignment?: VerticalEdge;
 }>
 const _componentLegendTitle = (props: ILegendTitleProps) => {
@@ -651,7 +651,7 @@ const LegendTitle = Object.assign<typeof _componentLegendTitle, NestedComponentM
 type ILegendTitleSubtitleProps = React.PropsWithChildren<{
   font?: ChartsFont;
   offset?: number;
-  text?: string;
+  text?: string | undefined;
 }>
 const _componentLegendTitleSubtitle = (props: ILegendTitleSubtitleProps) => {
   return React.createElement(NestedOption<ILegendTitleSubtitleProps>, {
@@ -803,7 +803,7 @@ const Size = Object.assign<typeof _componentSize, NestedComponentMeta>(_componen
 type ISubtitleProps = React.PropsWithChildren<{
   font?: ChartsFont;
   offset?: number;
-  text?: string;
+  text?: string | undefined;
   textOverflow?: TextOverflow;
   wordWrap?: WordWrap;
 }>
@@ -839,11 +839,11 @@ type ITitleProps = React.PropsWithChildren<{
   subtitle?: Record<string, any> | string | {
     font?: ChartsFont;
     offset?: number;
-    text?: string;
+    text?: string | undefined;
     textOverflow?: TextOverflow;
     wordWrap?: WordWrap;
   };
-  text?: string;
+  text?: string | undefined;
   verticalAlignment?: VerticalEdge;
   textOverflow?: TextOverflow;
   wordWrap?: WordWrap;
diff --git a/packages/devextreme-react/src/gallery.ts b/packages/devextreme-react/src/gallery.ts
index 8347e0837542..d17b0b2d0d03 100644
--- a/packages/devextreme-react/src/gallery.ts
+++ b/packages/devextreme-react/src/gallery.ts
@@ -33,10 +33,10 @@ type IGalleryOptions<TItem = any, TKey = any> = React.PropsWithChildren<ReplaceF
   itemComponent?: React.ComponentType<any>;
   defaultItems?: Array<any | dxGalleryItem | string>;
   defaultSelectedIndex?: number;
-  defaultSelectedItem?: any;
+  defaultSelectedItem?: any | null;
   onItemsChange?: (value: Array<any | dxGalleryItem | string>) => void;
   onSelectedIndexChange?: (value: number) => void;
-  onSelectedItemChange?: (value: any) => void;
+  onSelectedItemChange?: (value: any | null) => void;
 }>
 
 interface GalleryRef<TItem = any, TKey = any> {
diff --git a/packages/devextreme-react/src/gantt.ts b/packages/devextreme-react/src/gantt.ts
index 75f6b712daf8..dc2cdff0e864 100644
--- a/packages/devextreme-react/src/gantt.ts
+++ b/packages/devextreme-react/src/gantt.ts
@@ -28,34 +28,34 @@ type ReplaceFieldTypes<TSource, TReplacement> = {
 
 type IGanttOptionsNarrowedEvents = {
   onContentReady?: ((e: ContentReadyEvent) => void);
-  onContextMenuPreparing?: ((e: ContextMenuPreparingEvent) => void);
-  onCustomCommand?: ((e: CustomCommandEvent) => void);
-  onDependencyDeleted?: ((e: DependencyDeletedEvent) => void);
-  onDependencyDeleting?: ((e: DependencyDeletingEvent) => void);
-  onDependencyInserted?: ((e: DependencyInsertedEvent) => void);
-  onDependencyInserting?: ((e: DependencyInsertingEvent) => void);
+  onContextMenuPreparing?: ((e: ContextMenuPreparingEvent) => void) | undefined;
+  onCustomCommand?: ((e: CustomCommandEvent) => void) | undefined;
+  onDependencyDeleted?: ((e: DependencyDeletedEvent) => void) | undefined;
+  onDependencyDeleting?: ((e: DependencyDeletingEvent) => void) | undefined;
+  onDependencyInserted?: ((e: DependencyInsertedEvent) => void) | undefined;
+  onDependencyInserting?: ((e: DependencyInsertingEvent) => void) | undefined;
   onDisposing?: ((e: DisposingEvent) => void);
   onInitialized?: ((e: InitializedEvent) => void);
-  onResourceAssigned?: ((e: ResourceAssignedEvent) => void);
-  onResourceAssigning?: ((e: ResourceAssigningEvent) => void);
-  onResourceDeleted?: ((e: ResourceDeletedEvent) => void);
-  onResourceDeleting?: ((e: ResourceDeletingEvent) => void);
-  onResourceInserted?: ((e: ResourceInsertedEvent) => void);
-  onResourceInserting?: ((e: ResourceInsertingEvent) => void);
-  onResourceManagerDialogShowing?: ((e: ResourceManagerDialogShowingEvent) => void);
-  onResourceUnassigned?: ((e: ResourceUnassignedEvent) => void);
-  onResourceUnassigning?: ((e: ResourceUnassigningEvent) => void);
-  onScaleCellPrepared?: ((e: ScaleCellPreparedEvent) => void);
-  onTaskClick?: ((e: TaskClickEvent) => void);
-  onTaskDblClick?: ((e: TaskDblClickEvent) => void);
-  onTaskDeleted?: ((e: TaskDeletedEvent) => void);
-  onTaskDeleting?: ((e: TaskDeletingEvent) => void);
-  onTaskEditDialogShowing?: ((e: TaskEditDialogShowingEvent) => void);
-  onTaskInserted?: ((e: TaskInsertedEvent) => void);
-  onTaskInserting?: ((e: TaskInsertingEvent) => void);
-  onTaskMoving?: ((e: TaskMovingEvent) => void);
-  onTaskUpdated?: ((e: TaskUpdatedEvent) => void);
-  onTaskUpdating?: ((e: TaskUpdatingEvent) => void);
+  onResourceAssigned?: ((e: ResourceAssignedEvent) => void) | undefined;
+  onResourceAssigning?: ((e: ResourceAssigningEvent) => void) | undefined;
+  onResourceDeleted?: ((e: ResourceDeletedEvent) => void) | undefined;
+  onResourceDeleting?: ((e: ResourceDeletingEvent) => void) | undefined;
+  onResourceInserted?: ((e: ResourceInsertedEvent) => void) | undefined;
+  onResourceInserting?: ((e: ResourceInsertingEvent) => void) | undefined;
+  onResourceManagerDialogShowing?: ((e: ResourceManagerDialogShowingEvent) => void) | undefined;
+  onResourceUnassigned?: ((e: ResourceUnassignedEvent) => void) | undefined;
+  onResourceUnassigning?: ((e: ResourceUnassigningEvent) => void) | undefined;
+  onScaleCellPrepared?: ((e: ScaleCellPreparedEvent) => void) | undefined;
+  onTaskClick?: ((e: TaskClickEvent) => void) | undefined;
+  onTaskDblClick?: ((e: TaskDblClickEvent) => void) | undefined;
+  onTaskDeleted?: ((e: TaskDeletedEvent) => void) | undefined;
+  onTaskDeleting?: ((e: TaskDeletingEvent) => void) | undefined;
+  onTaskEditDialogShowing?: ((e: TaskEditDialogShowingEvent) => void) | undefined;
+  onTaskInserted?: ((e: TaskInsertedEvent) => void) | undefined;
+  onTaskInserting?: ((e: TaskInsertingEvent) => void) | undefined;
+  onTaskMoving?: ((e: TaskMovingEvent) => void) | undefined;
+  onTaskUpdated?: ((e: TaskUpdatedEvent) => void) | undefined;
+  onTaskUpdating?: ((e: TaskUpdatingEvent) => void) | undefined;
 }
 
 type IGanttOptions = React.PropsWithChildren<ReplaceFieldTypes<Properties, IGanttOptionsNarrowedEvents> & IHtmlOptions & {
diff --git a/packages/devextreme-react/src/html-editor.ts b/packages/devextreme-react/src/html-editor.ts
index dbe6f550fcf0..30bb958bd627 100644
--- a/packages/devextreme-react/src/html-editor.ts
+++ b/packages/devextreme-react/src/html-editor.ts
@@ -26,15 +26,15 @@ type ReplaceFieldTypes<TSource, TReplacement> = {
 type IHtmlEditorOptionsNarrowedEvents = {
   onContentReady?: ((e: ContentReadyEvent) => void);
   onDisposing?: ((e: DisposingEvent) => void);
-  onFocusIn?: ((e: FocusInEvent) => void);
-  onFocusOut?: ((e: FocusOutEvent) => void);
+  onFocusIn?: ((e: FocusInEvent) => void) | undefined;
+  onFocusOut?: ((e: FocusOutEvent) => void) | undefined;
   onInitialized?: ((e: InitializedEvent) => void);
   onValueChanged?: ((e: ValueChangedEvent) => void);
 }
 
 type IHtmlEditorOptions = React.PropsWithChildren<ReplaceFieldTypes<Properties, IHtmlEditorOptionsNarrowedEvents> & IHtmlOptions & {
-  defaultValue?: any;
-  onValueChange?: (value: any) => void;
+  defaultValue?: any | null;
+  onValueChange?: (value: any | null) => void;
 }>
 
 interface HtmlEditorRef {
@@ -158,20 +158,20 @@ type IFileUploaderOptionsProps = React.PropsWithChildren<{
   minFileSize?: number;
   multiple?: boolean;
   name?: string;
-  onBeforeSend?: ((e: BeforeSendEvent) => void);
+  onBeforeSend?: ((e: BeforeSendEvent) => void) | undefined;
   onContentReady?: ((e: FileUploaderContentReadyEvent) => void);
   onDisposing?: ((e: FileUploaderDisposingEvent) => void);
-  onDropZoneEnter?: ((e: DropZoneEnterEvent) => void);
-  onDropZoneLeave?: ((e: DropZoneLeaveEvent) => void);
-  onFilesUploaded?: ((e: FilesUploadedEvent) => void);
+  onDropZoneEnter?: ((e: DropZoneEnterEvent) => void) | undefined;
+  onDropZoneLeave?: ((e: DropZoneLeaveEvent) => void) | undefined;
+  onFilesUploaded?: ((e: FilesUploadedEvent) => void) | undefined;
   onInitialized?: ((e: FileUploaderInitializedEvent) => void);
   onOptionChanged?: ((e: OptionChangedEvent) => void);
-  onProgress?: ((e: ProgressEvent) => void);
-  onUploadAborted?: ((e: UploadAbortedEvent) => void);
-  onUploaded?: ((e: UploadedEvent) => void);
-  onUploadError?: ((e: UploadErrorEvent) => void);
-  onUploadStarted?: ((e: UploadStartedEvent) => void);
-  onValueChanged?: ((e: FileUploaderValueChangedEvent) => void);
+  onProgress?: ((e: ProgressEvent) => void) | undefined;
+  onUploadAborted?: ((e: UploadAbortedEvent) => void) | undefined;
+  onUploaded?: ((e: UploadedEvent) => void) | undefined;
+  onUploadError?: ((e: UploadErrorEvent) => void) | undefined;
+  onUploadStarted?: ((e: UploadStartedEvent) => void) | undefined;
+  onValueChanged?: ((e: FileUploaderValueChangedEvent) => void) | undefined;
   progress?: number;
   readOnly?: boolean;
   readyToUploadMessage?: string;
@@ -190,8 +190,8 @@ type IFileUploaderOptionsProps = React.PropsWithChildren<{
   uploadMethod?: UploadHttpMethod;
   uploadMode?: FileUploadMode;
   uploadUrl?: string;
-  validationError?: any;
-  validationErrors?: Array<any>;
+  validationError?: any | null;
+  validationErrors?: Array<any> | null;
   validationStatus?: ValidationStatus;
   value?: Array<any>;
   visible?: boolean;
diff --git a/packages/devextreme-react/src/linear-gauge.ts b/packages/devextreme-react/src/linear-gauge.ts
index 0c7cdd7118d5..ad5c90c11afa 100644
--- a/packages/devextreme-react/src/linear-gauge.ts
+++ b/packages/devextreme-react/src/linear-gauge.ts
@@ -31,10 +31,10 @@ type ILinearGaugeOptionsNarrowedEvents = {
 
 type ILinearGaugeOptions = React.PropsWithChildren<ReplaceFieldTypes<Properties, ILinearGaugeOptionsNarrowedEvents> & IHtmlOptions & {
   defaultLoadingIndicator?: Record<string, any>;
-  defaultSubvalues?: Array<number>;
+  defaultSubvalues?: Array<number> | undefined;
   defaultValue?: number | undefined;
   onLoadingIndicatorChange?: (value: Record<string, any>) => void;
-  onSubvaluesChange?: (value: Array<number>) => void;
+  onSubvaluesChange?: (value: Array<number> | undefined) => void;
   onValueChange?: (value: number | undefined) => void;
 }>
 
@@ -437,8 +437,8 @@ const RangeContainer = Object.assign<typeof _componentRangeContainer, NestedComp
 // LinearGauge
 type IScaleProps = React.PropsWithChildren<{
   allowDecimals?: boolean | undefined;
-  customMinorTicks?: Array<number>;
-  customTicks?: Array<number>;
+  customMinorTicks?: Array<number> | undefined;
+  customTicks?: Array<number> | undefined;
   endValue?: number;
   horizontalOrientation?: HorizontalAlignment;
   label?: Record<string, any> | {
@@ -534,7 +534,7 @@ const Size = Object.assign<typeof _componentSize, NestedComponentMeta>(_componen
 type ISubtitleProps = React.PropsWithChildren<{
   font?: ChartsFont;
   offset?: number;
-  text?: string;
+  text?: string | undefined;
   textOverflow?: TextOverflow;
   wordWrap?: WordWrap;
 }>
@@ -662,11 +662,11 @@ type ITitleProps = React.PropsWithChildren<{
   subtitle?: Record<string, any> | string | {
     font?: ChartsFont;
     offset?: number;
-    text?: string;
+    text?: string | undefined;
     textOverflow?: TextOverflow;
     wordWrap?: WordWrap;
   };
-  text?: string;
+  text?: string | undefined;
   textOverflow?: TextOverflow;
   verticalAlignment?: VerticalEdge;
   wordWrap?: WordWrap;
diff --git a/packages/devextreme-react/src/list.ts b/packages/devextreme-react/src/list.ts
index 5d9a88eff606..1176645d0eb4 100644
--- a/packages/devextreme-react/src/list.ts
+++ b/packages/devextreme-react/src/list.ts
@@ -23,20 +23,20 @@ type ReplaceFieldTypes<TSource, TReplacement> = {
 type IListOptionsNarrowedEvents<TItem = any, TKey = any> = {
   onContentReady?: ((e: ContentReadyEvent<TItem, TKey>) => void);
   onDisposing?: ((e: DisposingEvent<TItem, TKey>) => void);
-  onGroupRendered?: ((e: GroupRenderedEvent<TItem, TKey>) => void);
+  onGroupRendered?: ((e: GroupRenderedEvent<TItem, TKey>) => void) | undefined;
   onInitialized?: ((e: InitializedEvent<TItem, TKey>) => void);
   onItemClick?: ((e: ItemClickEvent<TItem, TKey>) => void);
-  onItemContextMenu?: ((e: ItemContextMenuEvent<TItem, TKey>) => void);
-  onItemDeleted?: ((e: ItemDeletedEvent<TItem, TKey>) => void);
-  onItemDeleting?: ((e: ItemDeletingEvent<TItem, TKey>) => void);
-  onItemHold?: ((e: ItemHoldEvent<TItem, TKey>) => void);
+  onItemContextMenu?: ((e: ItemContextMenuEvent<TItem, TKey>) => void) | undefined;
+  onItemDeleted?: ((e: ItemDeletedEvent<TItem, TKey>) => void) | undefined;
+  onItemDeleting?: ((e: ItemDeletingEvent<TItem, TKey>) => void) | undefined;
+  onItemHold?: ((e: ItemHoldEvent<TItem, TKey>) => void) | undefined;
   onItemRendered?: ((e: ItemRenderedEvent<TItem, TKey>) => void);
-  onItemReordered?: ((e: ItemReorderedEvent<TItem, TKey>) => void);
-  onItemSwipe?: ((e: ItemSwipeEvent<TItem, TKey>) => void);
-  onPageLoading?: ((e: PageLoadingEvent<TItem, TKey>) => void);
-  onPullRefresh?: ((e: PullRefreshEvent<TItem, TKey>) => void);
-  onScroll?: ((e: ScrollEvent<TItem, TKey>) => void);
-  onSelectAllValueChanged?: ((e: SelectAllValueChangedEvent<TItem, TKey>) => void);
+  onItemReordered?: ((e: ItemReorderedEvent<TItem, TKey>) => void) | undefined;
+  onItemSwipe?: ((e: ItemSwipeEvent<TItem, TKey>) => void) | undefined;
+  onPageLoading?: ((e: PageLoadingEvent<TItem, TKey>) => void) | undefined;
+  onPullRefresh?: ((e: PullRefreshEvent<TItem, TKey>) => void) | undefined;
+  onScroll?: ((e: ScrollEvent<TItem, TKey>) => void) | undefined;
+  onSelectAllValueChanged?: ((e: SelectAllValueChangedEvent<TItem, TKey>) => void) | undefined;
   onSelectionChanging?: ((e: SelectionChangingEvent<TItem, TKey>) => void);
 }
 
@@ -287,7 +287,7 @@ type IOptionsProps = React.PropsWithChildren<{
   hint?: string | undefined;
   hoverStateEnabled?: boolean;
   icon?: string;
-  onClick?: ((e: ClickEvent) => void);
+  onClick?: ((e: ClickEvent) => void) | undefined;
   onContentReady?: ((e: ButtonContentReadyEvent) => void);
   onDisposing?: ((e: ButtonDisposingEvent) => void);
   onInitialized?: ((e: ButtonInitializedEvent) => void);
@@ -328,7 +328,7 @@ const Options = Object.assign<typeof _componentOptions, NestedComponentMeta>(_co
 type ISearchEditorOptionsProps = React.PropsWithChildren<{
   accessKey?: string | undefined;
   activeStateEnabled?: boolean;
-  buttons?: Array<string | TextBoxPredefinedButton | TextEditorButton>;
+  buttons?: Array<string | TextBoxPredefinedButton | TextEditorButton> | undefined;
   disabled?: boolean;
   elementAttr?: Record<string, any>;
   focusStateEnabled?: boolean;
@@ -344,7 +344,7 @@ type ISearchEditorOptionsProps = React.PropsWithChildren<{
   maskChar?: string;
   maskInvalidMessage?: string;
   maskRules?: any;
-  maxLength?: number | string;
+  maxLength?: null | number | string;
   mode?: TextBoxType;
   name?: string;
   onChange?: ((e: ChangeEvent) => void);
@@ -372,8 +372,8 @@ type ISearchEditorOptionsProps = React.PropsWithChildren<{
   tabIndex?: number;
   text?: string;
   useMaskedValue?: boolean;
-  validationError?: any;
-  validationErrors?: Array<any>;
+  validationError?: any | null;
+  validationErrors?: Array<any> | null;
   validationMessageMode?: ValidationMessageMode;
   validationMessagePosition?: Position;
   validationStatus?: ValidationStatus;
diff --git a/packages/devextreme-react/src/lookup.ts b/packages/devextreme-react/src/lookup.ts
index e8e4ba676446..558857410e04 100644
--- a/packages/devextreme-react/src/lookup.ts
+++ b/packages/devextreme-react/src/lookup.ts
@@ -28,10 +28,10 @@ type ILookupOptionsNarrowedEvents = {
   onInitialized?: ((e: InitializedEvent) => void);
   onItemClick?: ((e: ItemClickEvent) => void);
   onOpened?: ((e: OpenedEvent) => void);
-  onPageLoading?: ((e: PageLoadingEvent) => void);
-  onPullRefresh?: ((e: PullRefreshEvent) => void);
-  onScroll?: ((e: ScrollEvent) => void);
-  onValueChanged?: ((e: ValueChangedEvent) => void);
+  onPageLoading?: ((e: PageLoadingEvent) => void) | undefined;
+  onPullRefresh?: ((e: PullRefreshEvent) => void) | undefined;
+  onScroll?: ((e: ScrollEvent) => void) | undefined;
+  onValueChanged?: ((e: ValueChangedEvent) => void) | undefined;
 }
 
 type ILookupOptions = React.PropsWithChildren<ReplaceFieldTypes<Properties, ILookupOptionsNarrowedEvents> & IHtmlOptions & {
diff --git a/packages/devextreme-react/src/map.ts b/packages/devextreme-react/src/map.ts
index dfaee1be9225..0a2d1462543d 100644
--- a/packages/devextreme-react/src/map.ts
+++ b/packages/devextreme-react/src/map.ts
@@ -18,11 +18,11 @@ type IMapOptionsNarrowedEvents = {
   onClick?: ((e: ClickEvent) => void);
   onDisposing?: ((e: DisposingEvent) => void);
   onInitialized?: ((e: InitializedEvent) => void);
-  onMarkerAdded?: ((e: MarkerAddedEvent) => void);
-  onMarkerRemoved?: ((e: MarkerRemovedEvent) => void);
-  onReady?: ((e: ReadyEvent) => void);
-  onRouteAdded?: ((e: RouteAddedEvent) => void);
-  onRouteRemoved?: ((e: RouteRemovedEvent) => void);
+  onMarkerAdded?: ((e: MarkerAddedEvent) => void) | undefined;
+  onMarkerRemoved?: ((e: MarkerRemovedEvent) => void) | undefined;
+  onReady?: ((e: ReadyEvent) => void) | undefined;
+  onRouteAdded?: ((e: RouteAddedEvent) => void) | undefined;
+  onRouteRemoved?: ((e: RouteRemovedEvent) => void) | undefined;
 }
 
 type IMapOptions = React.PropsWithChildren<ReplaceFieldTypes<Properties, IMapOptionsNarrowedEvents> & IHtmlOptions & {
diff --git a/packages/devextreme-react/src/menu.ts b/packages/devextreme-react/src/menu.ts
index d0f32c537659..a23f613b3181 100644
--- a/packages/devextreme-react/src/menu.ts
+++ b/packages/devextreme-react/src/menu.ts
@@ -25,10 +25,10 @@ type IMenuOptionsNarrowedEvents<TItem = any, TKey = any> = {
   onItemClick?: ((e: ItemClickEvent<TItem, TKey>) => void);
   onItemContextMenu?: ((e: ItemContextMenuEvent<TItem, TKey>) => void);
   onItemRendered?: ((e: ItemRenderedEvent<TItem, TKey>) => void);
-  onSubmenuHidden?: ((e: SubmenuHiddenEvent<TItem, TKey>) => void);
-  onSubmenuHiding?: ((e: SubmenuHidingEvent<TItem, TKey>) => void);
-  onSubmenuShowing?: ((e: SubmenuShowingEvent<TItem, TKey>) => void);
-  onSubmenuShown?: ((e: SubmenuShownEvent<TItem, TKey>) => void);
+  onSubmenuHidden?: ((e: SubmenuHiddenEvent<TItem, TKey>) => void) | undefined;
+  onSubmenuHiding?: ((e: SubmenuHidingEvent<TItem, TKey>) => void) | undefined;
+  onSubmenuShowing?: ((e: SubmenuShowingEvent<TItem, TKey>) => void) | undefined;
+  onSubmenuShown?: ((e: SubmenuShownEvent<TItem, TKey>) => void) | undefined;
 }
 
 type IMenuOptions<TItem = any, TKey = any> = React.PropsWithChildren<ReplaceFieldTypes<Properties<TItem, TKey>, IMenuOptionsNarrowedEvents<TItem, TKey>> & IHtmlOptions & {
@@ -36,9 +36,9 @@ type IMenuOptions<TItem = any, TKey = any> = React.PropsWithChildren<ReplaceFiel
   itemRender?: (...params: any) => React.ReactNode;
   itemComponent?: React.ComponentType<any>;
   defaultItems?: Array<any | dxMenuItem>;
-  defaultSelectedItem?: any;
+  defaultSelectedItem?: any | null;
   onItemsChange?: (value: Array<any | dxMenuItem>) => void;
-  onSelectedItemChange?: (value: any) => void;
+  onSelectedItemChange?: (value: any | null) => void;
 }>
 
 interface MenuRef<TItem = any, TKey = any> {
diff --git a/packages/devextreme-react/src/multi-view.ts b/packages/devextreme-react/src/multi-view.ts
index b52e8e9d56cb..329501d30de3 100644
--- a/packages/devextreme-react/src/multi-view.ts
+++ b/packages/devextreme-react/src/multi-view.ts
@@ -33,10 +33,10 @@ type IMultiViewOptions<TItem = any, TKey = any> = React.PropsWithChildren<Replac
   itemComponent?: React.ComponentType<any>;
   defaultItems?: Array<any | dxMultiViewItem | string>;
   defaultSelectedIndex?: number;
-  defaultSelectedItem?: any;
+  defaultSelectedItem?: any | null;
   onItemsChange?: (value: Array<any | dxMultiViewItem | string>) => void;
   onSelectedIndexChange?: (value: number) => void;
-  onSelectedItemChange?: (value: any) => void;
+  onSelectedItemChange?: (value: any | null) => void;
 }>
 
 interface MultiViewRef<TItem = any, TKey = any> {
diff --git a/packages/devextreme-react/src/number-box.ts b/packages/devextreme-react/src/number-box.ts
index 35e3966a2be6..0058c3bcb0b3 100644
--- a/packages/devextreme-react/src/number-box.ts
+++ b/packages/devextreme-react/src/number-box.ts
@@ -142,7 +142,7 @@ type IOptionsProps = React.PropsWithChildren<{
   hint?: string | undefined;
   hoverStateEnabled?: boolean;
   icon?: string;
-  onClick?: ((e: ClickEvent) => void);
+  onClick?: ((e: ClickEvent) => void) | undefined;
   onContentReady?: ((e: ButtonContentReadyEvent) => void);
   onDisposing?: ((e: ButtonDisposingEvent) => void);
   onInitialized?: ((e: ButtonInitializedEvent) => void);
diff --git a/packages/devextreme-react/src/pie-chart.ts b/packages/devextreme-react/src/pie-chart.ts
index d563f15bf286..26da830023f8 100644
--- a/packages/devextreme-react/src/pie-chart.ts
+++ b/packages/devextreme-react/src/pie-chart.ts
@@ -800,9 +800,9 @@ type ILegendProps = React.PropsWithChildren<{
     subtitle?: Record<string, any> | string | {
       font?: ChartsFont;
       offset?: number;
-      text?: string;
+      text?: string | undefined;
     };
-    text?: string;
+    text?: string | undefined;
     verticalAlignment?: VerticalEdge;
   };
   verticalAlignment?: VerticalEdge;
@@ -851,9 +851,9 @@ type ILegendTitleProps = React.PropsWithChildren<{
   subtitle?: Record<string, any> | string | {
     font?: ChartsFont;
     offset?: number;
-    text?: string;
+    text?: string | undefined;
   };
-  text?: string;
+  text?: string | undefined;
   verticalAlignment?: VerticalEdge;
 }>
 const _componentLegendTitle = (props: ILegendTitleProps) => {
@@ -880,7 +880,7 @@ const LegendTitle = Object.assign<typeof _componentLegendTitle, NestedComponentM
 type ILegendTitleSubtitleProps = React.PropsWithChildren<{
   font?: ChartsFont;
   offset?: number;
-  text?: string;
+  text?: string | undefined;
 }>
 const _componentLegendTitleSubtitle = (props: ILegendTitleSubtitleProps) => {
   return React.createElement(NestedOption<ILegendTitleSubtitleProps>, {
@@ -967,11 +967,11 @@ type IPieChartTitleProps = React.PropsWithChildren<{
   subtitle?: Record<string, any> | string | {
     font?: ChartsFont;
     offset?: number;
-    text?: string;
+    text?: string | undefined;
     textOverflow?: TextOverflow;
     wordWrap?: WordWrap;
   };
-  text?: string;
+  text?: string | undefined;
   textOverflow?: TextOverflow;
   verticalAlignment?: VerticalEdge;
   wordWrap?: WordWrap;
@@ -1000,7 +1000,7 @@ const PieChartTitle = Object.assign<typeof _componentPieChartTitle, NestedCompon
 type IPieChartTitleSubtitleProps = React.PropsWithChildren<{
   font?: ChartsFont;
   offset?: number;
-  text?: string;
+  text?: string | undefined;
   textOverflow?: TextOverflow;
   wordWrap?: WordWrap;
 }>
@@ -1280,7 +1280,7 @@ const SmallValuesGrouping = Object.assign<typeof _componentSmallValuesGrouping,
 type ISubtitleProps = React.PropsWithChildren<{
   font?: ChartsFont;
   offset?: number;
-  text?: string;
+  text?: string | undefined;
   textOverflow?: TextOverflow;
   wordWrap?: WordWrap;
 }>
@@ -1316,11 +1316,11 @@ type ITitleProps = React.PropsWithChildren<{
   subtitle?: Record<string, any> | string | {
     font?: ChartsFont;
     offset?: number;
-    text?: string;
+    text?: string | undefined;
     textOverflow?: TextOverflow;
     wordWrap?: WordWrap;
   };
-  text?: string;
+  text?: string | undefined;
   verticalAlignment?: VerticalEdge;
   textOverflow?: TextOverflow;
   wordWrap?: WordWrap;
diff --git a/packages/devextreme-react/src/polar-chart.ts b/packages/devextreme-react/src/polar-chart.ts
index c6ba4db5af64..318ca1ad6a84 100644
--- a/packages/devextreme-react/src/polar-chart.ts
+++ b/packages/devextreme-react/src/polar-chart.ts
@@ -34,8 +34,8 @@ type IPolarChartOptionsNarrowedEvents = {
   onSeriesClick?: ((e: SeriesClickEvent) => void);
   onTooltipHidden?: ((e: TooltipHiddenEvent) => void);
   onTooltipShown?: ((e: TooltipShownEvent) => void);
-  onZoomEnd?: ((e: ZoomEndEvent) => void);
-  onZoomStart?: ((e: ZoomStartEvent) => void);
+  onZoomEnd?: ((e: ZoomEndEvent) => void) | undefined;
+  onZoomStart?: ((e: ZoomStartEvent) => void) | undefined;
 }
 
 type IPolarChartOptions = React.PropsWithChildren<ReplaceFieldTypes<Properties, IPolarChartOptionsNarrowedEvents> & IHtmlOptions & {
@@ -1541,9 +1541,9 @@ type ILegendProps = React.PropsWithChildren<{
     subtitle?: Record<string, any> | string | {
       font?: ChartsFont;
       offset?: number;
-      text?: string;
+      text?: string | undefined;
     };
-    text?: string;
+    text?: string | undefined;
     verticalAlignment?: VerticalEdge;
   };
   verticalAlignment?: VerticalEdge;
@@ -1592,9 +1592,9 @@ type ILegendTitleProps = React.PropsWithChildren<{
   subtitle?: Record<string, any> | string | {
     font?: ChartsFont;
     offset?: number;
-    text?: string;
+    text?: string | undefined;
   };
-  text?: string;
+  text?: string | undefined;
   verticalAlignment?: VerticalEdge;
 }>
 const _componentLegendTitle = (props: ILegendTitleProps) => {
@@ -1621,7 +1621,7 @@ const LegendTitle = Object.assign<typeof _componentLegendTitle, NestedComponentM
 type ILegendTitleSubtitleProps = React.PropsWithChildren<{
   font?: ChartsFont;
   offset?: number;
-  text?: string;
+  text?: string | undefined;
 }>
 const _componentLegendTitleSubtitle = (props: ILegendTitleSubtitleProps) => {
   return React.createElement(NestedOption<ILegendTitleSubtitleProps>, {
@@ -1975,11 +1975,11 @@ type IPolarChartTitleProps = React.PropsWithChildren<{
   subtitle?: Record<string, any> | string | {
     font?: ChartsFont;
     offset?: number;
-    text?: string;
+    text?: string | undefined;
     textOverflow?: TextOverflow;
     wordWrap?: WordWrap;
   };
-  text?: string;
+  text?: string | undefined;
   textOverflow?: TextOverflow;
   verticalAlignment?: VerticalEdge;
   wordWrap?: WordWrap;
@@ -2008,7 +2008,7 @@ const PolarChartTitle = Object.assign<typeof _componentPolarChartTitle, NestedCo
 type IPolarChartTitleSubtitleProps = React.PropsWithChildren<{
   font?: ChartsFont;
   offset?: number;
-  text?: string;
+  text?: string | undefined;
   textOverflow?: TextOverflow;
   wordWrap?: WordWrap;
 }>
@@ -2425,7 +2425,7 @@ const StripStyleLabel = Object.assign<typeof _componentStripStyleLabel, NestedCo
 type ISubtitleProps = React.PropsWithChildren<{
   font?: ChartsFont;
   offset?: number;
-  text?: string;
+  text?: string | undefined;
   textOverflow?: TextOverflow;
   wordWrap?: WordWrap;
 }>
@@ -2513,11 +2513,11 @@ type ITitleProps = React.PropsWithChildren<{
   subtitle?: Record<string, any> | string | {
     font?: ChartsFont;
     offset?: number;
-    text?: string;
+    text?: string | undefined;
     textOverflow?: TextOverflow;
     wordWrap?: WordWrap;
   };
-  text?: string;
+  text?: string | undefined;
   verticalAlignment?: VerticalEdge;
   textOverflow?: TextOverflow;
   wordWrap?: WordWrap;
diff --git a/packages/devextreme-react/src/progress-bar.ts b/packages/devextreme-react/src/progress-bar.ts
index 5d8f86b6fe25..1581707a5979 100644
--- a/packages/devextreme-react/src/progress-bar.ts
+++ b/packages/devextreme-react/src/progress-bar.ts
@@ -14,7 +14,7 @@ type ReplaceFieldTypes<TSource, TReplacement> = {
 }
 
 type IProgressBarOptionsNarrowedEvents = {
-  onComplete?: ((e: CompleteEvent) => void);
+  onComplete?: ((e: CompleteEvent) => void) | undefined;
   onContentReady?: ((e: ContentReadyEvent) => void);
   onDisposing?: ((e: DisposingEvent) => void);
   onInitialized?: ((e: InitializedEvent) => void);
diff --git a/packages/devextreme-react/src/range-selector.ts b/packages/devextreme-react/src/range-selector.ts
index d7b87a74a826..619ffeb648e9 100644
--- a/packages/devextreme-react/src/range-selector.ts
+++ b/packages/devextreme-react/src/range-selector.ts
@@ -29,7 +29,7 @@ type IRangeSelectorOptionsNarrowedEvents = {
   onFileSaving?: ((e: FileSavingEvent) => void);
   onIncidentOccurred?: ((e: IncidentOccurredEvent) => void);
   onInitialized?: ((e: InitializedEvent) => void);
-  onValueChanged?: ((e: ValueChangedEvent) => void);
+  onValueChanged?: ((e: ValueChangedEvent) => void) | undefined;
 }
 
 type IRangeSelectorOptions = React.PropsWithChildren<ReplaceFieldTypes<Properties, IRangeSelectorOptionsNarrowedEvents> & IHtmlOptions & {
@@ -1482,7 +1482,7 @@ type IScaleProps = React.PropsWithChildren<{
     years?: number;
   };
   allowDecimals?: boolean | undefined;
-  breaks?: Array<ScaleBreak> | {
+  breaks?: Array<ScaleBreak> | undefined | {
     endValue?: Date | number | string | undefined;
     startValue?: Date | number | string | undefined;
   }[];
@@ -1495,7 +1495,7 @@ type IScaleProps = React.PropsWithChildren<{
   discreteAxisDivisionMode?: DiscreteAxisDivisionMode;
   endOnTick?: boolean;
   endValue?: Date | number | string | undefined;
-  holidays?: Array<Date | string> | Array<number>;
+  holidays?: Array<Date | string> | Array<number> | undefined;
   label?: Record<string, any> | {
     customizeText?: ((scaleValue: { value: Date | number | string, valueText: string }) => string);
     font?: ChartsFont;
@@ -1559,7 +1559,7 @@ type IScaleProps = React.PropsWithChildren<{
   };
   placeholderHeight?: number | undefined;
   showCustomBoundaryTicks?: boolean;
-  singleWorkdays?: Array<Date | string> | Array<number>;
+  singleWorkdays?: Array<Date | string> | Array<number> | undefined;
   startValue?: Date | number | string | undefined;
   tick?: Record<string, any> | {
     color?: string;
@@ -2014,7 +2014,7 @@ const SliderMarker = Object.assign<typeof _componentSliderMarker, NestedComponen
 type ISubtitleProps = React.PropsWithChildren<{
   font?: ChartsFont;
   offset?: number;
-  text?: string;
+  text?: string | undefined;
   textOverflow?: TextOverflow;
   wordWrap?: WordWrap;
 }>
@@ -2095,11 +2095,11 @@ type ITitleProps = React.PropsWithChildren<{
   subtitle?: Record<string, any> | string | {
     font?: ChartsFont;
     offset?: number;
-    text?: string;
+    text?: string | undefined;
     textOverflow?: TextOverflow;
     wordWrap?: WordWrap;
   };
-  text?: string;
+  text?: string | undefined;
   textOverflow?: TextOverflow;
   verticalAlignment?: VerticalEdge;
   wordWrap?: WordWrap;
diff --git a/packages/devextreme-react/src/range-slider.ts b/packages/devextreme-react/src/range-slider.ts
index d1f2606d7874..694b80b22c12 100644
--- a/packages/devextreme-react/src/range-slider.ts
+++ b/packages/devextreme-react/src/range-slider.ts
@@ -20,7 +20,7 @@ type IRangeSliderOptionsNarrowedEvents = {
   onContentReady?: ((e: ContentReadyEvent) => void);
   onDisposing?: ((e: DisposingEvent) => void);
   onInitialized?: ((e: InitializedEvent) => void);
-  onValueChanged?: ((e: ValueChangedEvent) => void);
+  onValueChanged?: ((e: ValueChangedEvent) => void) | undefined;
 }
 
 type IRangeSliderOptions = React.PropsWithChildren<ReplaceFieldTypes<Properties, IRangeSliderOptionsNarrowedEvents> & IHtmlOptions & {
diff --git a/packages/devextreme-react/src/resizable.ts b/packages/devextreme-react/src/resizable.ts
index a19d55ce0111..b69d3a8abc91 100644
--- a/packages/devextreme-react/src/resizable.ts
+++ b/packages/devextreme-react/src/resizable.ts
@@ -16,9 +16,9 @@ type ReplaceFieldTypes<TSource, TReplacement> = {
 type IResizableOptionsNarrowedEvents = {
   onDisposing?: ((e: DisposingEvent) => void);
   onInitialized?: ((e: InitializedEvent) => void);
-  onResize?: ((e: ResizeEvent) => void);
-  onResizeEnd?: ((e: ResizeEndEvent) => void);
-  onResizeStart?: ((e: ResizeStartEvent) => void);
+  onResize?: ((e: ResizeEvent) => void) | undefined;
+  onResizeEnd?: ((e: ResizeEndEvent) => void) | undefined;
+  onResizeStart?: ((e: ResizeStartEvent) => void) | undefined;
 }
 
 type IResizableOptions = React.PropsWithChildren<ReplaceFieldTypes<Properties, IResizableOptionsNarrowedEvents> & IHtmlOptions & {
diff --git a/packages/devextreme-react/src/sankey.ts b/packages/devextreme-react/src/sankey.ts
index 825ab791ffc8..0634ebb9c2ac 100644
--- a/packages/devextreme-react/src/sankey.ts
+++ b/packages/devextreme-react/src/sankey.ts
@@ -518,7 +518,7 @@ const Size = Object.assign<typeof _componentSize, NestedComponentMeta>(_componen
 type ISubtitleProps = React.PropsWithChildren<{
   font?: ChartsFont;
   offset?: number;
-  text?: string;
+  text?: string | undefined;
   textOverflow?: TextOverflow;
   wordWrap?: WordWrap;
 }>
@@ -553,11 +553,11 @@ type ITitleProps = React.PropsWithChildren<{
   subtitle?: Record<string, any> | string | {
     font?: ChartsFont;
     offset?: number;
-    text?: string;
+    text?: string | undefined;
     textOverflow?: TextOverflow;
     wordWrap?: WordWrap;
   };
-  text?: string;
+  text?: string | undefined;
   textOverflow?: TextOverflow;
   verticalAlignment?: VerticalEdge;
   wordWrap?: WordWrap;
diff --git a/packages/devextreme-react/src/scheduler.ts b/packages/devextreme-react/src/scheduler.ts
index 978ea1be3715..59250c5beee0 100644
--- a/packages/devextreme-react/src/scheduler.ts
+++ b/packages/devextreme-react/src/scheduler.ts
@@ -280,7 +280,7 @@ type IButtonOptionsProps = React.PropsWithChildren<{
   hint?: string | undefined;
   hoverStateEnabled?: boolean;
   icon?: string;
-  onClick?: ((e: ClickEvent) => void);
+  onClick?: ((e: ClickEvent) => void) | undefined;
   onContentReady?: ((e: ButtonContentReadyEvent) => void);
   onDisposing?: ((e: ButtonDisposingEvent) => void);
   onInitialized?: ((e: ButtonInitializedEvent) => void);
@@ -501,12 +501,12 @@ type IFormProps = React.PropsWithChildren<{
   minColWidth?: number;
   onContentReady?: ((e: FormContentReadyEvent) => void);
   onDisposing?: ((e: FormDisposingEvent) => void);
-  onEditorEnterKey?: ((e: EditorEnterKeyEvent) => void);
-  onFieldDataChanged?: ((e: FieldDataChangedEvent) => void);
+  onEditorEnterKey?: ((e: EditorEnterKeyEvent) => void) | undefined;
+  onFieldDataChanged?: ((e: FieldDataChangedEvent) => void) | undefined;
   onInitialized?: ((e: FormInitializedEvent) => void);
   onOptionChanged?: ((e: FormOptionChangedEvent) => void);
-  onSmartPasted?: ((e: SmartPastedEvent) => void);
-  onSmartPasting?: ((e: SmartPastingEvent) => void);
+  onSmartPasted?: ((e: SmartPastedEvent) => void) | undefined;
+  onSmartPasting?: ((e: SmartPastingEvent) => void) | undefined;
   optionalMark?: string;
   readOnly?: boolean;
   requiredMark?: string;
@@ -814,9 +814,9 @@ type IOptionsProps = React.PropsWithChildren<{
   onContentReady?: ((e: ButtonGroupContentReadyEvent) => void);
   onDisposing?: ((e: ButtonGroupDisposingEvent) => void);
   onInitialized?: ((e: ButtonGroupInitializedEvent) => void);
-  onItemClick?: ((e: ItemClickEvent) => void);
+  onItemClick?: ((e: ItemClickEvent) => void) | undefined;
   onOptionChanged?: ((e: ButtonGroupOptionChangedEvent) => void);
-  onSelectionChanged?: ((e: SelectionChangedEvent) => void);
+  onSelectionChanged?: ((e: SelectionChangedEvent) => void) | undefined;
   rtlEnabled?: boolean;
   selectedItemKeys?: Array<any>;
   selectedItems?: Array<any>;
@@ -1238,14 +1238,14 @@ type ITabPanelOptionsProps = React.PropsWithChildren<{
   onSelectionChanged?: ((e: TabPanelSelectionChangedEvent) => void);
   onSelectionChanging?: ((e: SelectionChangingEvent) => void);
   onTitleClick?: ((e: TitleClickEvent) => void);
-  onTitleHold?: ((e: TitleHoldEvent) => void);
-  onTitleRendered?: ((e: TitleRenderedEvent) => void);
+  onTitleHold?: ((e: TitleHoldEvent) => void) | undefined;
+  onTitleRendered?: ((e: TitleRenderedEvent) => void) | undefined;
   repaintChangesOnly?: boolean;
   rtlEnabled?: boolean;
   scrollByContent?: boolean;
   scrollingEnabled?: boolean;
   selectedIndex?: number;
-  selectedItem?: any;
+  selectedItem?: any | null;
   showNavButtons?: boolean;
   stylingMode?: TabsStyle;
   swipeEnabled?: boolean;
@@ -1257,8 +1257,8 @@ type ITabPanelOptionsProps = React.PropsWithChildren<{
   onItemsChange?: (value: Array<any | dxTabPanelItem | string>) => void;
   defaultSelectedIndex?: number;
   onSelectedIndexChange?: (value: number) => void;
-  defaultSelectedItem?: any;
-  onSelectedItemChange?: (value: any) => void;
+  defaultSelectedItem?: any | null;
+  onSelectedItemChange?: (value: any | null) => void;
   itemRender?: (...params: any) => React.ReactNode;
   itemComponent?: React.ComponentType<any>;
   itemTitleRender?: (...params: any) => React.ReactNode;
diff --git a/packages/devextreme-react/src/scroll-view.ts b/packages/devextreme-react/src/scroll-view.ts
index e6a961a291e9..108daead3b35 100644
--- a/packages/devextreme-react/src/scroll-view.ts
+++ b/packages/devextreme-react/src/scroll-view.ts
@@ -16,8 +16,8 @@ type ReplaceFieldTypes<TSource, TReplacement> = {
 type IScrollViewOptionsNarrowedEvents = {
   onDisposing?: ((e: DisposingEvent) => void);
   onInitialized?: ((e: InitializedEvent) => void);
-  onPullDown?: ((e: PullDownEvent) => void);
-  onReachBottom?: ((e: ReachBottomEvent) => void);
+  onPullDown?: ((e: PullDownEvent) => void) | undefined;
+  onReachBottom?: ((e: ReachBottomEvent) => void) | undefined;
   onScroll?: ((e: ScrollEvent) => void);
   onUpdated?: ((e: UpdatedEvent) => void);
 }
diff --git a/packages/devextreme-react/src/select-box.ts b/packages/devextreme-react/src/select-box.ts
index 9ba89de55cee..3b46b048be9b 100644
--- a/packages/devextreme-react/src/select-box.ts
+++ b/packages/devextreme-react/src/select-box.ts
@@ -266,18 +266,18 @@ type IDropDownOptionsProps = React.PropsWithChildren<{
   maxWidth?: number | string;
   minHeight?: number | string;
   minWidth?: number | string;
-  onContentReady?: ((e: EventInfo<any>) => void);
-  onDisposing?: ((e: EventInfo<any>) => void);
+  onContentReady?: ((e: EventInfo<any>) => void) | undefined;
+  onDisposing?: ((e: EventInfo<any>) => void) | undefined;
   onHidden?: ((e: EventInfo<any>) => void);
   onHiding?: ((e: { cancel: boolean | any, component: dxOverlay<any>, element: any, model: any }) => void);
-  onInitialized?: ((e: { component: Component<any>, element: any }) => void);
-  onOptionChanged?: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void);
-  onResize?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void);
-  onResizeEnd?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void);
-  onResizeStart?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void);
+  onInitialized?: ((e: { component: Component<any>, element: any }) => void) | undefined;
+  onOptionChanged?: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) | undefined;
+  onResize?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined;
+  onResizeEnd?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined;
+  onResizeStart?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined;
   onShowing?: ((e: { cancel: boolean | any, component: dxOverlay<any>, element: any, model: any }) => void);
   onShown?: ((e: EventInfo<any>) => void);
-  onTitleRendered?: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void);
+  onTitleRendered?: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) | undefined;
   position?: (() => void) | PositionAlignment | PositionConfig;
   resizeEnabled?: boolean;
   restorePosition?: boolean;
@@ -509,7 +509,7 @@ type IOptionsProps = React.PropsWithChildren<{
   hint?: string | undefined;
   hoverStateEnabled?: boolean;
   icon?: string;
-  onClick?: ((e: ClickEvent) => void);
+  onClick?: ((e: ClickEvent) => void) | undefined;
   onContentReady?: ((e: ButtonContentReadyEvent) => void);
   onDisposing?: ((e: ButtonDisposingEvent) => void);
   onInitialized?: ((e: ButtonInitializedEvent) => void);
diff --git a/packages/devextreme-react/src/speed-dial-action.ts b/packages/devextreme-react/src/speed-dial-action.ts
index 6330cd9bb2f4..cf073e2dcb47 100644
--- a/packages/devextreme-react/src/speed-dial-action.ts
+++ b/packages/devextreme-react/src/speed-dial-action.ts
@@ -15,7 +15,7 @@ type ReplaceFieldTypes<TSource, TReplacement> = {
 
 type ISpeedDialActionOptionsNarrowedEvents = {
   onClick?: ((e: ClickEvent) => void);
-  onContentReady?: ((e: ContentReadyEvent) => void);
+  onContentReady?: ((e: ContentReadyEvent) => void) | undefined;
   onDisposing?: ((e: DisposingEvent) => void);
   onInitialized?: ((e: InitializedEvent) => void);
 }
diff --git a/packages/devextreme-react/src/splitter.ts b/packages/devextreme-react/src/splitter.ts
index dc0708393874..4b652ae287f0 100644
--- a/packages/devextreme-react/src/splitter.ts
+++ b/packages/devextreme-react/src/splitter.ts
@@ -22,13 +22,13 @@ type ISplitterOptionsNarrowedEvents<TItem = any, TKey = any> = {
   onDisposing?: ((e: DisposingEvent<TItem, TKey>) => void);
   onInitialized?: ((e: InitializedEvent<TItem, TKey>) => void);
   onItemClick?: ((e: ItemClickEvent<TItem, TKey>) => void);
-  onItemCollapsed?: ((e: ItemCollapsedEvent<TItem, TKey>) => void);
+  onItemCollapsed?: ((e: ItemCollapsedEvent<TItem, TKey>) => void) | undefined;
   onItemContextMenu?: ((e: ItemContextMenuEvent<TItem, TKey>) => void);
-  onItemExpanded?: ((e: ItemExpandedEvent<TItem, TKey>) => void);
+  onItemExpanded?: ((e: ItemExpandedEvent<TItem, TKey>) => void) | undefined;
   onItemRendered?: ((e: ItemRenderedEvent<TItem, TKey>) => void);
-  onResize?: ((e: ResizeEvent<TKey>) => void);
-  onResizeEnd?: ((e: ResizeEndEvent<TKey>) => void);
-  onResizeStart?: ((e: ResizeStartEvent<TKey>) => void);
+  onResize?: ((e: ResizeEvent<TKey>) => void) | undefined;
+  onResizeEnd?: ((e: ResizeEndEvent<TKey>) => void) | undefined;
+  onResizeStart?: ((e: ResizeStartEvent<TKey>) => void) | undefined;
 }
 
 type ISplitterOptions<TItem = any, TKey = any> = React.PropsWithChildren<ReplaceFieldTypes<Properties<TItem, TKey>, ISplitterOptionsNarrowedEvents<TItem, TKey>> & IHtmlOptions & {
diff --git a/packages/devextreme-react/src/stepper.ts b/packages/devextreme-react/src/stepper.ts
index c98c4df8925c..6e93848fc5b6 100644
--- a/packages/devextreme-react/src/stepper.ts
+++ b/packages/devextreme-react/src/stepper.ts
@@ -32,10 +32,10 @@ type IStepperOptions<TItem = any, TKey = any> = React.PropsWithChildren<ReplaceF
   itemComponent?: React.ComponentType<any>;
   defaultItems?: Array<dxStepperItem>;
   defaultSelectedIndex?: number;
-  defaultSelectedItem?: any;
+  defaultSelectedItem?: any | null;
   onItemsChange?: (value: Array<dxStepperItem>) => void;
   onSelectedIndexChange?: (value: number) => void;
-  onSelectedItemChange?: (value: any) => void;
+  onSelectedItemChange?: (value: any | null) => void;
 }>
 
 interface StepperRef<TItem = any, TKey = any> {
diff --git a/packages/devextreme-react/src/tab-panel.ts b/packages/devextreme-react/src/tab-panel.ts
index 2242bf8f7ce7..92e6ba66247f 100644
--- a/packages/devextreme-react/src/tab-panel.ts
+++ b/packages/devextreme-react/src/tab-panel.ts
@@ -27,8 +27,8 @@ type ITabPanelOptionsNarrowedEvents<TItem = any, TKey = any> = {
   onItemRendered?: ((e: ItemRenderedEvent<TItem, TKey>) => void);
   onSelectionChanging?: ((e: SelectionChangingEvent<TItem, TKey>) => void);
   onTitleClick?: ((e: TitleClickEvent<TItem, TKey>) => void);
-  onTitleHold?: ((e: TitleHoldEvent<TItem, TKey>) => void);
-  onTitleRendered?: ((e: TitleRenderedEvent<TItem, TKey>) => void);
+  onTitleHold?: ((e: TitleHoldEvent<TItem, TKey>) => void) | undefined;
+  onTitleRendered?: ((e: TitleRenderedEvent<TItem, TKey>) => void) | undefined;
 }
 
 type ITabPanelOptions<TItem = any, TKey = any> = React.PropsWithChildren<ReplaceFieldTypes<Properties<TItem, TKey>, ITabPanelOptionsNarrowedEvents<TItem, TKey>> & IHtmlOptions & {
@@ -39,10 +39,10 @@ type ITabPanelOptions<TItem = any, TKey = any> = React.PropsWithChildren<Replace
   itemTitleComponent?: React.ComponentType<any>;
   defaultItems?: Array<any | dxTabPanelItem | string>;
   defaultSelectedIndex?: number;
-  defaultSelectedItem?: any;
+  defaultSelectedItem?: any | null;
   onItemsChange?: (value: Array<any | dxTabPanelItem | string>) => void;
   onSelectedIndexChange?: (value: number) => void;
-  onSelectedItemChange?: (value: any) => void;
+  onSelectedItemChange?: (value: any | null) => void;
 }>
 
 interface TabPanelRef<TItem = any, TKey = any> {
diff --git a/packages/devextreme-react/src/tabs.ts b/packages/devextreme-react/src/tabs.ts
index 1dc9ce23e37b..18497c5769f7 100644
--- a/packages/devextreme-react/src/tabs.ts
+++ b/packages/devextreme-react/src/tabs.ts
@@ -34,12 +34,12 @@ type ITabsOptions<TItem = any, TKey = any> = React.PropsWithChildren<ReplaceFiel
   itemComponent?: React.ComponentType<any>;
   defaultItems?: Array<any | dxTabsItem | string>;
   defaultSelectedIndex?: number;
-  defaultSelectedItem?: any;
+  defaultSelectedItem?: any | null;
   defaultSelectedItemKeys?: Array<any>;
   defaultSelectedItems?: Array<any>;
   onItemsChange?: (value: Array<any | dxTabsItem | string>) => void;
   onSelectedIndexChange?: (value: number) => void;
-  onSelectedItemChange?: (value: any) => void;
+  onSelectedItemChange?: (value: any | null) => void;
   onSelectedItemKeysChange?: (value: Array<any>) => void;
   onSelectedItemsChange?: (value: Array<any>) => void;
 }>
diff --git a/packages/devextreme-react/src/tag-box.ts b/packages/devextreme-react/src/tag-box.ts
index fd23233126c4..4486cacad69e 100644
--- a/packages/devextreme-react/src/tag-box.ts
+++ b/packages/devextreme-react/src/tag-box.ts
@@ -41,9 +41,9 @@ type ITagBoxOptionsNarrowedEvents = {
   onItemClick?: ((e: ItemClickEvent) => void);
   onKeyDown?: ((e: KeyDownEvent) => void);
   onKeyUp?: ((e: KeyUpEvent) => void);
-  onMultiTagPreparing?: ((e: MultiTagPreparingEvent) => void);
+  onMultiTagPreparing?: ((e: MultiTagPreparingEvent) => void) | undefined;
   onOpened?: ((e: OpenedEvent) => void);
-  onSelectAllValueChanged?: ((e: SelectAllValueChangedEvent) => void);
+  onSelectAllValueChanged?: ((e: SelectAllValueChangedEvent) => void) | undefined;
   onValueChanged?: ((e: ValueChangedEvent) => void);
 }
 
@@ -272,18 +272,18 @@ type IDropDownOptionsProps = React.PropsWithChildren<{
   maxWidth?: number | string;
   minHeight?: number | string;
   minWidth?: number | string;
-  onContentReady?: ((e: EventInfo<any>) => void);
-  onDisposing?: ((e: EventInfo<any>) => void);
+  onContentReady?: ((e: EventInfo<any>) => void) | undefined;
+  onDisposing?: ((e: EventInfo<any>) => void) | undefined;
   onHidden?: ((e: EventInfo<any>) => void);
   onHiding?: ((e: { cancel: boolean | any, component: dxOverlay<any>, element: any, model: any }) => void);
-  onInitialized?: ((e: { component: Component<any>, element: any }) => void);
-  onOptionChanged?: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void);
-  onResize?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void);
-  onResizeEnd?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void);
-  onResizeStart?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void);
+  onInitialized?: ((e: { component: Component<any>, element: any }) => void) | undefined;
+  onOptionChanged?: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) | undefined;
+  onResize?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined;
+  onResizeEnd?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined;
+  onResizeStart?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined;
   onShowing?: ((e: { cancel: boolean | any, component: dxOverlay<any>, element: any, model: any }) => void);
   onShown?: ((e: EventInfo<any>) => void);
-  onTitleRendered?: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void);
+  onTitleRendered?: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) | undefined;
   position?: (() => void) | PositionAlignment | PositionConfig;
   resizeEnabled?: boolean;
   restorePosition?: boolean;
@@ -515,7 +515,7 @@ type IOptionsProps = React.PropsWithChildren<{
   hint?: string | undefined;
   hoverStateEnabled?: boolean;
   icon?: string;
-  onClick?: ((e: ClickEvent) => void);
+  onClick?: ((e: ClickEvent) => void) | undefined;
   onContentReady?: ((e: ButtonContentReadyEvent) => void);
   onDisposing?: ((e: ButtonDisposingEvent) => void);
   onInitialized?: ((e: ButtonInitializedEvent) => void);
diff --git a/packages/devextreme-react/src/text-box.ts b/packages/devextreme-react/src/text-box.ts
index 4a5756cdf743..c47b9668345a 100644
--- a/packages/devextreme-react/src/text-box.ts
+++ b/packages/devextreme-react/src/text-box.ts
@@ -118,7 +118,7 @@ type IOptionsProps = React.PropsWithChildren<{
   hint?: string | undefined;
   hoverStateEnabled?: boolean;
   icon?: string;
-  onClick?: ((e: ClickEvent) => void);
+  onClick?: ((e: ClickEvent) => void) | undefined;
   onContentReady?: ((e: ButtonContentReadyEvent) => void);
   onDisposing?: ((e: ButtonDisposingEvent) => void);
   onInitialized?: ((e: ButtonInitializedEvent) => void);
diff --git a/packages/devextreme-react/src/tree-list.ts b/packages/devextreme-react/src/tree-list.ts
index 25acb626d9eb..22f2ead911b0 100644
--- a/packages/devextreme-react/src/tree-list.ts
+++ b/packages/devextreme-react/src/tree-list.ts
@@ -433,7 +433,7 @@ type IButtonOptionsProps = React.PropsWithChildren<{
   hint?: string | undefined;
   hoverStateEnabled?: boolean;
   icon?: string;
-  onClick?: ((e: ClickEvent) => void);
+  onClick?: ((e: ClickEvent) => void) | undefined;
   onContentReady?: ((e: ButtonContentReadyEvent) => void);
   onDisposing?: ((e: ButtonDisposingEvent) => void);
   onInitialized?: ((e: ButtonInitializedEvent) => void);
@@ -1126,7 +1126,7 @@ const EditingTexts = Object.assign<typeof _componentEditingTexts, NestedComponen
 type IEditorOptionsProps = React.PropsWithChildren<{
   accessKey?: string | undefined;
   activeStateEnabled?: boolean;
-  buttons?: Array<string | TextBoxPredefinedButton | TextEditorButton>;
+  buttons?: Array<string | TextBoxPredefinedButton | TextEditorButton> | undefined;
   disabled?: boolean;
   elementAttr?: Record<string, any>;
   focusStateEnabled?: boolean;
@@ -1142,7 +1142,7 @@ type IEditorOptionsProps = React.PropsWithChildren<{
   maskChar?: string;
   maskInvalidMessage?: string;
   maskRules?: any;
-  maxLength?: number | string;
+  maxLength?: null | number | string;
   mode?: TextBoxType;
   name?: string;
   onChange?: ((e: ChangeEvent) => void);
@@ -1170,8 +1170,8 @@ type IEditorOptionsProps = React.PropsWithChildren<{
   tabIndex?: number;
   text?: string;
   useMaskedValue?: boolean;
-  validationError?: any;
-  validationErrors?: Array<any>;
+  validationError?: any | null;
+  validationErrors?: Array<any> | null;
   validationMessageMode?: ValidationMessageMode;
   validationMessagePosition?: CommonPosition;
   validationStatus?: ValidationStatus;
@@ -1449,18 +1449,18 @@ type IFilterBuilderPopupProps = React.PropsWithChildren<{
   maxWidth?: number | string;
   minHeight?: number | string;
   minWidth?: number | string;
-  onContentReady?: ((e: EventInfo<any>) => void);
-  onDisposing?: ((e: EventInfo<any>) => void);
+  onContentReady?: ((e: EventInfo<any>) => void) | undefined;
+  onDisposing?: ((e: EventInfo<any>) => void) | undefined;
   onHidden?: ((e: EventInfo<any>) => void);
   onHiding?: ((e: { cancel: boolean | any, component: dxOverlay<any>, element: any, model: any }) => void);
-  onInitialized?: ((e: { component: Component<any>, element: any }) => void);
-  onOptionChanged?: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void);
-  onResize?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void);
-  onResizeEnd?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void);
-  onResizeStart?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void);
+  onInitialized?: ((e: { component: Component<any>, element: any }) => void) | undefined;
+  onOptionChanged?: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) | undefined;
+  onResize?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined;
+  onResizeEnd?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined;
+  onResizeStart?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined;
   onShowing?: ((e: { cancel: boolean | any, component: dxOverlay<any>, element: any, model: any }) => void);
   onShown?: ((e: EventInfo<any>) => void);
-  onTitleRendered?: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void);
+  onTitleRendered?: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) | undefined;
   position?: (() => void) | PositionAlignment | PositionConfig;
   resizeEnabled?: boolean;
   restorePosition?: boolean;
@@ -1674,12 +1674,12 @@ type IFormProps = React.PropsWithChildren<{
   minColWidth?: number;
   onContentReady?: ((e: FormContentReadyEvent) => void);
   onDisposing?: ((e: FormDisposingEvent) => void);
-  onEditorEnterKey?: ((e: EditorEnterKeyEvent) => void);
-  onFieldDataChanged?: ((e: FieldDataChangedEvent) => void);
+  onEditorEnterKey?: ((e: EditorEnterKeyEvent) => void) | undefined;
+  onFieldDataChanged?: ((e: FieldDataChangedEvent) => void) | undefined;
   onInitialized?: ((e: FormInitializedEvent) => void);
   onOptionChanged?: ((e: FormOptionChangedEvent) => void);
-  onSmartPasted?: ((e: SmartPastedEvent) => void);
-  onSmartPasting?: ((e: SmartPastingEvent) => void);
+  onSmartPasted?: ((e: SmartPastedEvent) => void) | undefined;
+  onSmartPasting?: ((e: SmartPastingEvent) => void) | undefined;
   optionalMark?: string;
   readOnly?: boolean;
   requiredMark?: string;
@@ -2362,7 +2362,7 @@ type IOptionsProps = React.PropsWithChildren<{
   hint?: string | undefined;
   hoverStateEnabled?: boolean;
   icon?: string;
-  onClick?: ((e: ClickEvent) => void);
+  onClick?: ((e: ClickEvent) => void) | undefined;
   onContentReady?: ((e: ContentReadyEvent) => void);
   onDisposing?: ((e: DisposingEvent) => void);
   onInitialized?: ((e: InitializedEvent) => void);
@@ -2506,18 +2506,18 @@ type IPopupProps = React.PropsWithChildren<{
   maxWidth?: number | string;
   minHeight?: number | string;
   minWidth?: number | string;
-  onContentReady?: ((e: EventInfo<any>) => void);
-  onDisposing?: ((e: EventInfo<any>) => void);
+  onContentReady?: ((e: EventInfo<any>) => void) | undefined;
+  onDisposing?: ((e: EventInfo<any>) => void) | undefined;
   onHidden?: ((e: EventInfo<any>) => void);
   onHiding?: ((e: { cancel: boolean | any, component: dxOverlay<any>, element: any, model: any }) => void);
-  onInitialized?: ((e: { component: Component<any>, element: any }) => void);
-  onOptionChanged?: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void);
-  onResize?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void);
-  onResizeEnd?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void);
-  onResizeStart?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void);
+  onInitialized?: ((e: { component: Component<any>, element: any }) => void) | undefined;
+  onOptionChanged?: ((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void) | undefined;
+  onResize?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined;
+  onResizeEnd?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined;
+  onResizeStart?: ((e: { component: dxPopup, element: any, event: event, height: number, model: any, width: number }) => void) | undefined;
   onShowing?: ((e: { cancel: boolean | any, component: dxOverlay<any>, element: any, model: any }) => void);
   onShown?: ((e: EventInfo<any>) => void);
-  onTitleRendered?: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void);
+  onTitleRendered?: ((e: { component: dxPopup, element: any, model: any, titleElement: any }) => void) | undefined;
   position?: (() => void) | PositionAlignment | PositionConfig;
   resizeEnabled?: boolean;
   restorePosition?: boolean;
@@ -3162,14 +3162,14 @@ type ITabPanelOptionsProps = React.PropsWithChildren<{
   onSelectionChanged?: ((e: SelectionChangedEvent) => void);
   onSelectionChanging?: ((e: SelectionChangingEvent) => void);
   onTitleClick?: ((e: TitleClickEvent) => void);
-  onTitleHold?: ((e: TitleHoldEvent) => void);
-  onTitleRendered?: ((e: TitleRenderedEvent) => void);
+  onTitleHold?: ((e: TitleHoldEvent) => void) | undefined;
+  onTitleRendered?: ((e: TitleRenderedEvent) => void) | undefined;
   repaintChangesOnly?: boolean;
   rtlEnabled?: boolean;
   scrollByContent?: boolean;
   scrollingEnabled?: boolean;
   selectedIndex?: number;
-  selectedItem?: any;
+  selectedItem?: any | null;
   showNavButtons?: boolean;
   stylingMode?: TabsStyle;
   swipeEnabled?: boolean;
@@ -3181,8 +3181,8 @@ type ITabPanelOptionsProps = React.PropsWithChildren<{
   onItemsChange?: (value: Array<any | dxTabPanelItem | string>) => void;
   defaultSelectedIndex?: number;
   onSelectedIndexChange?: (value: number) => void;
-  defaultSelectedItem?: any;
-  onSelectedItemChange?: (value: any) => void;
+  defaultSelectedItem?: any | null;
+  onSelectedItemChange?: (value: any | null) => void;
   itemRender?: (...params: any) => React.ReactNode;
   itemComponent?: React.ComponentType<any>;
   itemTitleRender?: (...params: any) => React.ReactNode;
diff --git a/packages/devextreme-react/src/tree-map.ts b/packages/devextreme-react/src/tree-map.ts
index 8b216992024f..639891c08dee 100644
--- a/packages/devextreme-react/src/tree-map.ts
+++ b/packages/devextreme-react/src/tree-map.ts
@@ -21,14 +21,14 @@ type ITreeMapOptionsNarrowedEvents = {
   onClick?: ((e: ClickEvent) => void);
   onDisposing?: ((e: DisposingEvent) => void);
   onDrawn?: ((e: DrawnEvent) => void);
-  onDrill?: ((e: DrillEvent) => void);
+  onDrill?: ((e: DrillEvent) => void) | undefined;
   onExported?: ((e: ExportedEvent) => void);
   onExporting?: ((e: ExportingEvent) => void);
   onFileSaving?: ((e: FileSavingEvent) => void);
   onIncidentOccurred?: ((e: IncidentOccurredEvent) => void);
   onInitialized?: ((e: InitializedEvent) => void);
-  onNodesInitialized?: ((e: NodesInitializedEvent) => void);
-  onNodesRendering?: ((e: NodesRenderingEvent) => void);
+  onNodesInitialized?: ((e: NodesInitializedEvent) => void) | undefined;
+  onNodesRendering?: ((e: NodesRenderingEvent) => void) | undefined;
 }
 
 type ITreeMapOptions = React.PropsWithChildren<ReplaceFieldTypes<Properties, ITreeMapOptionsNarrowedEvents> & IHtmlOptions & {
@@ -120,7 +120,7 @@ type IColorizerProps = React.PropsWithChildren<{
   colorizeGroups?: boolean;
   palette?: Array<string> | Palette;
   paletteExtensionMode?: PaletteExtensionMode;
-  range?: Array<number>;
+  range?: Array<number> | undefined;
   type?: TreeMapColorizerType | undefined;
 }>
 const _componentColorizer = (props: IColorizerProps) => {
@@ -461,7 +461,7 @@ const Size = Object.assign<typeof _componentSize, NestedComponentMeta>(_componen
 type ISubtitleProps = React.PropsWithChildren<{
   font?: ChartsFont;
   offset?: number;
-  text?: string;
+  text?: string | undefined;
   textOverflow?: TextOverflow;
   wordWrap?: WordWrap;
 }>
@@ -570,11 +570,11 @@ type ITitleProps = React.PropsWithChildren<{
   subtitle?: Record<string, any> | string | {
     font?: ChartsFont;
     offset?: number;
-    text?: string;
+    text?: string | undefined;
     textOverflow?: TextOverflow;
     wordWrap?: WordWrap;
   };
-  text?: string;
+  text?: string | undefined;
   textOverflow?: TextOverflow;
   verticalAlignment?: VerticalEdge;
   wordWrap?: WordWrap;
diff --git a/packages/devextreme-react/src/tree-view.ts b/packages/devextreme-react/src/tree-view.ts
index 980124ba2734..89b10b10c916 100644
--- a/packages/devextreme-react/src/tree-view.ts
+++ b/packages/devextreme-react/src/tree-view.ts
@@ -23,13 +23,13 @@ type ITreeViewOptionsNarrowedEvents<TItem = any, TKey = any> = {
   onContentReady?: ((e: ContentReadyEvent<TItem, TKey>) => void);
   onDisposing?: ((e: DisposingEvent<TItem, TKey>) => void);
   onInitialized?: ((e: InitializedEvent<TItem, TKey>) => void);
-  onItemClick?: ((e: ItemClickEvent<TItem, TKey>) => void);
-  onItemCollapsed?: ((e: ItemCollapsedEvent<TItem, TKey>) => void);
-  onItemContextMenu?: ((e: ItemContextMenuEvent<TItem, TKey>) => void);
-  onItemExpanded?: ((e: ItemExpandedEvent<TItem, TKey>) => void);
-  onItemHold?: ((e: ItemHoldEvent<TItem, TKey>) => void);
-  onItemRendered?: ((e: ItemRenderedEvent<TItem, TKey>) => void);
-  onSelectAllValueChanged?: ((e: SelectAllValueChangedEvent<TItem, TKey>) => void);
+  onItemClick?: ((e: ItemClickEvent<TItem, TKey>) => void) | undefined;
+  onItemCollapsed?: ((e: ItemCollapsedEvent<TItem, TKey>) => void) | undefined;
+  onItemContextMenu?: ((e: ItemContextMenuEvent<TItem, TKey>) => void) | undefined;
+  onItemExpanded?: ((e: ItemExpandedEvent<TItem, TKey>) => void) | undefined;
+  onItemHold?: ((e: ItemHoldEvent<TItem, TKey>) => void) | undefined;
+  onItemRendered?: ((e: ItemRenderedEvent<TItem, TKey>) => void) | undefined;
+  onSelectAllValueChanged?: ((e: SelectAllValueChangedEvent<TItem, TKey>) => void) | undefined;
 }
 
 type ITreeViewOptions<TItem = any, TKey = any> = React.PropsWithChildren<ReplaceFieldTypes<Properties<TItem, TKey>, ITreeViewOptionsNarrowedEvents<TItem, TKey>> & IHtmlOptions & {
@@ -171,7 +171,7 @@ type IOptionsProps = React.PropsWithChildren<{
   hint?: string | undefined;
   hoverStateEnabled?: boolean;
   icon?: string;
-  onClick?: ((e: ClickEvent) => void);
+  onClick?: ((e: ClickEvent) => void) | undefined;
   onContentReady?: ((e: ButtonContentReadyEvent) => void);
   onDisposing?: ((e: ButtonDisposingEvent) => void);
   onInitialized?: ((e: ButtonInitializedEvent) => void);
@@ -212,7 +212,7 @@ const Options = Object.assign<typeof _componentOptions, NestedComponentMeta>(_co
 type ISearchEditorOptionsProps = React.PropsWithChildren<{
   accessKey?: string | undefined;
   activeStateEnabled?: boolean;
-  buttons?: Array<string | TextBoxPredefinedButton | TextEditorButton>;
+  buttons?: Array<string | TextBoxPredefinedButton | TextEditorButton> | undefined;
   disabled?: boolean;
   elementAttr?: Record<string, any>;
   focusStateEnabled?: boolean;
@@ -228,7 +228,7 @@ type ISearchEditorOptionsProps = React.PropsWithChildren<{
   maskChar?: string;
   maskInvalidMessage?: string;
   maskRules?: any;
-  maxLength?: number | string;
+  maxLength?: null | number | string;
   mode?: TextBoxType;
   name?: string;
   onChange?: ((e: ChangeEvent) => void);
@@ -256,8 +256,8 @@ type ISearchEditorOptionsProps = React.PropsWithChildren<{
   tabIndex?: number;
   text?: string;
   useMaskedValue?: boolean;
-  validationError?: any;
-  validationErrors?: Array<any>;
+  validationError?: any | null;
+  validationErrors?: Array<any> | null;
   validationMessageMode?: ValidationMessageMode;
   validationMessagePosition?: Position;
   validationStatus?: ValidationStatus;
diff --git a/packages/devextreme-react/src/vector-map.ts b/packages/devextreme-react/src/vector-map.ts
index 64f80c73d47d..bac7d1c81463 100644
--- a/packages/devextreme-react/src/vector-map.ts
+++ b/packages/devextreme-react/src/vector-map.ts
@@ -29,8 +29,8 @@ type IVectorMapOptionsNarrowedEvents = {
   onFileSaving?: ((e: FileSavingEvent) => void);
   onIncidentOccurred?: ((e: IncidentOccurredEvent) => void);
   onInitialized?: ((e: InitializedEvent) => void);
-  onTooltipHidden?: ((e: TooltipHiddenEvent) => void);
-  onTooltipShown?: ((e: TooltipShownEvent) => void);
+  onTooltipHidden?: ((e: TooltipHiddenEvent) => void) | undefined;
+  onTooltipShown?: ((e: TooltipShownEvent) => void) | undefined;
 }
 
 type IVectorMapOptions = React.PropsWithChildren<ReplaceFieldTypes<Properties, IVectorMapOptionsNarrowedEvents> & IHtmlOptions & {
@@ -109,7 +109,7 @@ type IAnnotationProps = React.PropsWithChildren<{
     width?: number;
   };
   color?: string;
-  coordinates?: Array<number>;
+  coordinates?: Array<number> | undefined;
   customizeTooltip?: ((annotation: dxVectorMapAnnotationConfig | any) => Record<string, any>) | undefined;
   data?: any;
   description?: string | undefined;
@@ -263,7 +263,7 @@ type ICommonAnnotationSettingsProps = React.PropsWithChildren<{
     width?: number;
   };
   color?: string;
-  coordinates?: Array<number>;
+  coordinates?: Array<number> | undefined;
   customizeTooltip?: ((annotation: dxVectorMapAnnotationConfig | any) => Record<string, any>) | undefined;
   data?: any;
   description?: string | undefined;
@@ -462,7 +462,7 @@ type ILayerProps = React.PropsWithChildren<{
   borderWidth?: number;
   color?: string;
   colorGroupingField?: string | undefined;
-  colorGroups?: Array<number>;
+  colorGroups?: Array<number> | undefined;
   customize?: ((elements: Array<MapLayerElement>) => void);
   dataField?: string | undefined;
   dataSource?: Array<any> | DataSource | DataSourceOptions | null | Record<string, any> | Store | string;
@@ -489,7 +489,7 @@ type ILayerProps = React.PropsWithChildren<{
   selectionMode?: SingleMultipleOrNone;
   size?: number;
   sizeGroupingField?: string | undefined;
-  sizeGroups?: Array<number>;
+  sizeGroups?: Array<number> | undefined;
   type?: VectorMapLayerType;
 }>
 const _componentLayer = (props: ILayerProps) => {
@@ -562,9 +562,9 @@ type ILegendProps = React.PropsWithChildren<{
     subtitle?: Record<string, any> | string | {
       font?: ChartsFont;
       offset?: number;
-      text?: string;
+      text?: string | undefined;
     };
-    text?: string;
+    text?: string | undefined;
     verticalAlignment?: VerticalEdge;
   };
   verticalAlignment?: VerticalEdge;
@@ -615,9 +615,9 @@ type ILegendTitleProps = React.PropsWithChildren<{
   subtitle?: Record<string, any> | string | {
     font?: ChartsFont;
     offset?: number;
-    text?: string;
+    text?: string | undefined;
   };
-  text?: string;
+  text?: string | undefined;
   verticalAlignment?: VerticalEdge;
 }>
 const _componentLegendTitle = (props: ILegendTitleProps) => {
@@ -644,7 +644,7 @@ const LegendTitle = Object.assign<typeof _componentLegendTitle, NestedComponentM
 type ILegendTitleSubtitleProps = React.PropsWithChildren<{
   font?: ChartsFont;
   offset?: number;
-  text?: string;
+  text?: string | undefined;
 }>
 const _componentLegendTitleSubtitle = (props: ILegendTitleSubtitleProps) => {
   return React.createElement(NestedOption<ILegendTitleSubtitleProps>, {
@@ -803,7 +803,7 @@ const Source = Object.assign<typeof _componentSource, NestedComponentMeta>(_comp
 type ISubtitleProps = React.PropsWithChildren<{
   font?: ChartsFont;
   offset?: number;
-  text?: string;
+  text?: string | undefined;
   textOverflow?: TextOverflow;
   wordWrap?: WordWrap;
 }>
@@ -839,11 +839,11 @@ type ITitleProps = React.PropsWithChildren<{
   subtitle?: Record<string, any> | string | {
     font?: ChartsFont;
     offset?: number;
-    text?: string;
+    text?: string | undefined;
     textOverflow?: TextOverflow;
     wordWrap?: WordWrap;
   };
-  text?: string;
+  text?: string | undefined;
   verticalAlignment?: VerticalEdge;
   textOverflow?: TextOverflow;
   wordWrap?: WordWrap;
@@ -960,11 +960,11 @@ type IVectorMapTitleProps = React.PropsWithChildren<{
   subtitle?: Record<string, any> | string | {
     font?: ChartsFont;
     offset?: number;
-    text?: string;
+    text?: string | undefined;
     textOverflow?: TextOverflow;
     wordWrap?: WordWrap;
   };
-  text?: string;
+  text?: string | undefined;
   textOverflow?: TextOverflow;
   verticalAlignment?: VerticalEdge;
   wordWrap?: WordWrap;
@@ -993,7 +993,7 @@ const VectorMapTitle = Object.assign<typeof _componentVectorMapTitle, NestedComp
 type IVectorMapTitleSubtitleProps = React.PropsWithChildren<{
   font?: ChartsFont;
   offset?: number;
-  text?: string;
+  text?: string | undefined;
   textOverflow?: TextOverflow;
   wordWrap?: WordWrap;
 }>
diff --git a/packages/devextreme-vue/src/accordion.ts b/packages/devextreme-vue/src/accordion.ts
index 93f0c6d35f9a..b26db562a4fe 100644
--- a/packages/devextreme-vue/src/accordion.ts
+++ b/packages/devextreme-vue/src/accordion.ts
@@ -88,7 +88,7 @@ const componentConfig = {
     items: Array as PropType<Array<any | dxAccordionItem | string>>,
     itemTemplate: {},
     itemTitleTemplate: {},
-    keyExpr: [Function, String] as PropType<(((item: any) => any)) | string>,
+    keyExpr: [Function, String] as PropType<(((item: any) => any)) | null | string>,
     multiple: Boolean,
     noDataText: String,
     onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>,
diff --git a/packages/devextreme-vue/src/autocomplete.ts b/packages/devextreme-vue/src/autocomplete.ts
index 86376919ca72..8917f694b7bd 100644
--- a/packages/devextreme-vue/src/autocomplete.ts
+++ b/packages/devextreme-vue/src/autocomplete.ts
@@ -200,7 +200,7 @@ const componentConfig = {
     label: String,
     labelMode: String as PropType<LabelMode>,
     maxItemCount: Number,
-    maxLength: [Number, String],
+    maxLength: [Number, String] as PropType<null | number | string>,
     minSearchLength: Number,
     name: String,
     onChange: Function as PropType<((e: ChangeEvent) => void)>,
@@ -239,7 +239,7 @@ const componentConfig = {
     text: String,
     useItemTextAsTitle: Boolean,
     validationError: {},
-    validationErrors: Array as PropType<Array<any>>,
+    validationErrors: Array as PropType<Array<any> | null>,
     validationMessageMode: String as PropType<ValidationMessageMode>,
     validationMessagePosition: String as PropType<Mode | Position>,
     validationStatus: String as PropType<ValidationStatus>,
diff --git a/packages/devextreme-vue/src/calendar.ts b/packages/devextreme-vue/src/calendar.ts
index ad126171c867..afc8fdd36268 100644
--- a/packages/devextreme-vue/src/calendar.ts
+++ b/packages/devextreme-vue/src/calendar.ts
@@ -74,7 +74,7 @@ const componentConfig = {
     cellTemplate: {},
     dateSerializationFormat: String,
     disabled: Boolean,
-    disabledDates: [Array, Function] as PropType<Array<Date> | (((data: DisabledDate) => boolean))>,
+    disabledDates: [Array, Function] as PropType<Array<Date> | (((data: DisabledDate) => boolean)) | null>,
     elementAttr: Object as PropType<Record<string, any>>,
     firstDayOfWeek: Number as PropType<DayOfWeek>,
     focusStateEnabled: Boolean,
@@ -101,7 +101,7 @@ const componentConfig = {
     tabIndex: Number,
     todayButtonText: String,
     validationError: {},
-    validationErrors: Array as PropType<Array<any>>,
+    validationErrors: Array as PropType<Array<any> | null>,
     validationMessageMode: String as PropType<ValidationMessageMode>,
     validationMessagePosition: String as PropType<Position>,
     validationStatus: String as PropType<ValidationStatus>,
diff --git a/packages/devextreme-vue/src/chart.ts b/packages/devextreme-vue/src/chart.ts
index 8e0eda21e886..c0cf7824c448 100644
--- a/packages/devextreme-vue/src/chart.ts
+++ b/packages/devextreme-vue/src/chart.ts
@@ -693,7 +693,7 @@ const DxArgumentAxisConfig = {
     minVisualRangeLength: [Number, Object, String] as PropType<number | Record<string, any> | TimeInterval>,
     offset: Number,
     opacity: Number,
-    placeholderSize: Number,
+    placeholderSize: Number as PropType<null | number>,
     position: String as PropType<Position>,
     singleWorkdays: Array as PropType<(Array<Date | string>) | Array<number>>,
     strips: Array as PropType<Array<Record<string, any>>>,
@@ -1215,7 +1215,7 @@ const DxCommonAxisSettingsConfig = {
     minorTick: Object as PropType<Record<string, any>>,
     minValueMargin: Number,
     opacity: Number,
-    placeholderSize: Number,
+    placeholderSize: Number as PropType<null | number>,
     stripStyle: Object as PropType<Record<string, any>>,
     tick: Object as PropType<Record<string, any>>,
     title: Object as PropType<Record<string, any>>,
@@ -3440,7 +3440,7 @@ const DxValueAxisConfig = {
     offset: Number,
     opacity: Number,
     pane: String,
-    placeholderSize: Number,
+    placeholderSize: Number as PropType<null | number>,
     position: String as PropType<Position>,
     showZero: Boolean,
     strips: Array as PropType<Array<Record<string, any>>>,
diff --git a/packages/devextreme-vue/src/chat.ts b/packages/devextreme-vue/src/chat.ts
index 7036b1e3115e..62b453875482 100644
--- a/packages/devextreme-vue/src/chat.ts
+++ b/packages/devextreme-vue/src/chat.ts
@@ -569,7 +569,7 @@ const DxFileUploaderOptionsConfig = {
     uploadMode: String as PropType<FileUploadMode>,
     uploadUrl: String,
     validationError: {},
-    validationErrors: Array as PropType<Array<any>>,
+    validationErrors: Array as PropType<Array<any> | null>,
     validationStatus: String as PropType<ValidationStatus>,
     value: Array as PropType<Array<any>>,
     visible: Boolean,
diff --git a/packages/devextreme-vue/src/check-box.ts b/packages/devextreme-vue/src/check-box.ts
index 472fc2a7ec11..750860588fc4 100644
--- a/packages/devextreme-vue/src/check-box.ts
+++ b/packages/devextreme-vue/src/check-box.ts
@@ -77,7 +77,7 @@ const componentConfig = {
     tabIndex: Number,
     text: String,
     validationError: {},
-    validationErrors: Array as PropType<Array<any>>,
+    validationErrors: Array as PropType<Array<any> | null>,
     validationMessageMode: String as PropType<ValidationMessageMode>,
     validationMessagePosition: String as PropType<Position>,
     validationStatus: String as PropType<ValidationStatus>,
diff --git a/packages/devextreme-vue/src/color-box.ts b/packages/devextreme-vue/src/color-box.ts
index a471de301dde..e49215f78451 100644
--- a/packages/devextreme-vue/src/color-box.ts
+++ b/packages/devextreme-vue/src/color-box.ts
@@ -204,7 +204,7 @@ const componentConfig = {
     tabIndex: Number,
     text: String,
     validationError: {},
-    validationErrors: Array as PropType<Array<any>>,
+    validationErrors: Array as PropType<Array<any> | null>,
     validationMessageMode: String as PropType<ValidationMessageMode>,
     validationMessagePosition: String as PropType<Mode | Position>,
     validationStatus: String as PropType<ValidationStatus>,
diff --git a/packages/devextreme-vue/src/data-grid.ts b/packages/devextreme-vue/src/data-grid.ts
index 7eb39a9740a6..60de58e9c6cb 100644
--- a/packages/devextreme-vue/src/data-grid.ts
+++ b/packages/devextreme-vue/src/data-grid.ts
@@ -1936,7 +1936,7 @@ const DxEditorOptionsConfig = {
     maskChar: String,
     maskInvalidMessage: String,
     maskRules: {},
-    maxLength: [Number, String],
+    maxLength: [Number, String] as PropType<null | number | string>,
     mode: String as PropType<TextBoxType>,
     name: String,
     onChange: Function as PropType<((e: ChangeEvent) => void)>,
@@ -1965,7 +1965,7 @@ const DxEditorOptionsConfig = {
     text: String,
     useMaskedValue: Boolean,
     validationError: {},
-    validationErrors: Array as PropType<Array<any>>,
+    validationErrors: Array as PropType<Array<any> | null>,
     validationMessageMode: String as PropType<ValidationMessageMode>,
     validationMessagePosition: String as PropType<Position>,
     validationStatus: String as PropType<ValidationStatus>,
diff --git a/packages/devextreme-vue/src/date-box.ts b/packages/devextreme-vue/src/date-box.ts
index 5025dce0b230..a5f4ceb804db 100644
--- a/packages/devextreme-vue/src/date-box.ts
+++ b/packages/devextreme-vue/src/date-box.ts
@@ -198,8 +198,8 @@ const componentConfig = {
     dateSerializationFormat: String,
     deferRendering: Boolean,
     disabled: Boolean,
-    disabledDates: [Array, Function] as PropType<Array<Date> | (((data: { component: dxDateBox, date: Date, view: string }) => boolean))>,
-    displayFormat: [Object, String, Function] as PropType<Format | CommonFormat | (((value: number | Date) => string)) | Record<string, any> | string>,
+    disabledDates: [Array, Function] as PropType<Array<Date> | (((data: { component: dxDateBox, date: Date, view: string }) => boolean)) | null>,
+    displayFormat: [Object, String, Function] as PropType<Format | null | CommonFormat | (((value: number | Date) => string)) | Record<string, any> | string>,
     dropDownButtonTemplate: {},
     dropDownOptions: Object as PropType<dxPopupOptions<any> | Record<string, any>>,
     elementAttr: Object as PropType<Record<string, any>>,
@@ -215,7 +215,7 @@ const componentConfig = {
     label: String,
     labelMode: String as PropType<LabelMode>,
     max: [Date, Number, String] as PropType<Date | null | number | string>,
-    maxLength: [Number, String],
+    maxLength: [Number, String] as PropType<null | number | string>,
     min: [Date, Number, String] as PropType<Date | null | number | string>,
     name: String,
     onChange: Function as PropType<((e: ChangeEvent) => void)>,
@@ -252,7 +252,7 @@ const componentConfig = {
     type: String as PropType<DateType>,
     useMaskBehavior: Boolean,
     validationError: {},
-    validationErrors: Array as PropType<Array<any>>,
+    validationErrors: Array as PropType<Array<any> | null>,
     validationMessageMode: String as PropType<ValidationMessageMode>,
     validationMessagePosition: String as PropType<Mode | Position>,
     validationStatus: String as PropType<ValidationStatus>,
@@ -501,7 +501,7 @@ const DxCalendarOptionsConfig = {
     cellTemplate: {},
     dateSerializationFormat: String,
     disabled: Boolean,
-    disabledDates: [Array, Function] as PropType<Array<Date> | (((data: DisabledDate) => boolean))>,
+    disabledDates: [Array, Function] as PropType<Array<Date> | (((data: DisabledDate) => boolean)) | null>,
     elementAttr: Object as PropType<Record<string, any>>,
     firstDayOfWeek: Number as PropType<DayOfWeek>,
     focusStateEnabled: Boolean,
@@ -528,7 +528,7 @@ const DxCalendarOptionsConfig = {
     tabIndex: Number,
     todayButtonText: String,
     validationError: {},
-    validationErrors: Array as PropType<Array<any>>,
+    validationErrors: Array as PropType<Array<any> | null>,
     validationMessageMode: String as PropType<ValidationMessageMode>,
     validationMessagePosition: String as PropType<Position>,
     validationStatus: String as PropType<ValidationStatus>,
diff --git a/packages/devextreme-vue/src/date-range-box.ts b/packages/devextreme-vue/src/date-range-box.ts
index 22d9b7fd35d9..a5b641516aca 100644
--- a/packages/devextreme-vue/src/date-range-box.ts
+++ b/packages/devextreme-vue/src/date-range-box.ts
@@ -198,7 +198,7 @@ const componentConfig = {
     deferRendering: Boolean,
     disabled: Boolean,
     disableOutOfRangeSelection: Boolean,
-    displayFormat: [Object, String, Function] as PropType<Format | CommonFormat | (((value: number | Date) => string)) | Record<string, any> | string>,
+    displayFormat: [Object, String, Function] as PropType<Format | null | CommonFormat | (((value: number | Date) => string)) | Record<string, any> | string>,
     dropDownButtonTemplate: {},
     dropDownOptions: Object as PropType<dxPopupOptions<any> | Record<string, any>>,
     elementAttr: Object as PropType<Record<string, any>>,
@@ -257,7 +257,7 @@ const componentConfig = {
     todayButtonText: String,
     useMaskBehavior: Boolean,
     validationError: {},
-    validationErrors: Array as PropType<Array<any>>,
+    validationErrors: Array as PropType<Array<any> | null>,
     validationMessageMode: String as PropType<ValidationMessageMode>,
     validationMessagePosition: String as PropType<Mode | Position>,
     validationStatus: String as PropType<ValidationStatus>,
@@ -510,7 +510,7 @@ const DxCalendarOptionsConfig = {
     cellTemplate: {},
     dateSerializationFormat: String,
     disabled: Boolean,
-    disabledDates: [Array, Function] as PropType<Array<Date> | (((data: DisabledDate) => boolean))>,
+    disabledDates: [Array, Function] as PropType<Array<Date> | (((data: DisabledDate) => boolean)) | null>,
     elementAttr: Object as PropType<Record<string, any>>,
     firstDayOfWeek: Number as PropType<DayOfWeek>,
     focusStateEnabled: Boolean,
@@ -537,7 +537,7 @@ const DxCalendarOptionsConfig = {
     tabIndex: Number,
     todayButtonText: String,
     validationError: {},
-    validationErrors: Array as PropType<Array<any>>,
+    validationErrors: Array as PropType<Array<any> | null>,
     validationMessageMode: String as PropType<ValidationMessageMode>,
     validationMessagePosition: String as PropType<Position>,
     validationStatus: String as PropType<ValidationStatus>,
diff --git a/packages/devextreme-vue/src/drawer.ts b/packages/devextreme-vue/src/drawer.ts
index 895e51a991b3..e3faee2df0f4 100644
--- a/packages/devextreme-vue/src/drawer.ts
+++ b/packages/devextreme-vue/src/drawer.ts
@@ -55,8 +55,8 @@ const componentConfig = {
     height: [Number, String],
     hint: String,
     hoverStateEnabled: Boolean,
-    maxSize: Number,
-    minSize: Number,
+    maxSize: Number as PropType<null | number>,
+    minSize: Number as PropType<null | number>,
     onDisposing: Function as PropType<((e: DisposingEvent) => void)>,
     onInitialized: Function as PropType<((e: InitializedEvent) => void)>,
     onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>,
diff --git a/packages/devextreme-vue/src/drop-down-box.ts b/packages/devextreme-vue/src/drop-down-box.ts
index c92fd7f02f3e..d488c718cb50 100644
--- a/packages/devextreme-vue/src/drop-down-box.ts
+++ b/packages/devextreme-vue/src/drop-down-box.ts
@@ -185,7 +185,7 @@ const componentConfig = {
     items: Array as PropType<Array<any>>,
     label: String,
     labelMode: String as PropType<LabelMode>,
-    maxLength: [Number, String],
+    maxLength: [Number, String] as PropType<null | number | string>,
     name: String,
     onChange: Function as PropType<((e: ChangeEvent) => void)>,
     onClosed: Function as PropType<((e: ClosedEvent) => void)>,
@@ -214,7 +214,7 @@ const componentConfig = {
     tabIndex: Number,
     text: String,
     validationError: {},
-    validationErrors: Array as PropType<Array<any>>,
+    validationErrors: Array as PropType<Array<any> | null>,
     validationMessageMode: String as PropType<ValidationMessageMode>,
     validationMessagePosition: String as PropType<Mode | Position>,
     validationStatus: String as PropType<ValidationStatus>,
diff --git a/packages/devextreme-vue/src/file-uploader.ts b/packages/devextreme-vue/src/file-uploader.ts
index 5d353e87addd..8c9946b4ef78 100644
--- a/packages/devextreme-vue/src/file-uploader.ts
+++ b/packages/devextreme-vue/src/file-uploader.ts
@@ -157,7 +157,7 @@ const componentConfig = {
     uploadMode: String as PropType<FileUploadMode>,
     uploadUrl: String,
     validationError: {},
-    validationErrors: Array as PropType<Array<any>>,
+    validationErrors: Array as PropType<Array<any> | null>,
     validationStatus: String as PropType<ValidationStatus>,
     value: Array as PropType<Array<any>>,
     visible: Boolean,
diff --git a/packages/devextreme-vue/src/html-editor.ts b/packages/devextreme-vue/src/html-editor.ts
index 32d125827096..f98ba4a6db7c 100644
--- a/packages/devextreme-vue/src/html-editor.ts
+++ b/packages/devextreme-vue/src/html-editor.ts
@@ -140,8 +140,8 @@ const componentConfig = {
     imageUpload: Object as PropType<dxHtmlEditorImageUpload | Record<string, any>>,
     isDirty: Boolean,
     isValid: Boolean,
-    mediaResizing: Object as PropType<dxHtmlEditorMediaResizing | Record<string, any>>,
-    mentions: Array as PropType<Array<dxHtmlEditorMention>>,
+    mediaResizing: Object as PropType<dxHtmlEditorMediaResizing | null | Record<string, any>>,
+    mentions: Array as PropType<Array<dxHtmlEditorMention> | null>,
     name: String,
     onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>,
     onDisposing: Function as PropType<((e: DisposingEvent) => void)>,
@@ -155,16 +155,16 @@ const componentConfig = {
     rtlEnabled: Boolean,
     stylingMode: String as PropType<EditorStyle>,
     tabIndex: Number,
-    tableContextMenu: Object as PropType<dxHtmlEditorTableContextMenu | Record<string, any>>,
-    tableResizing: Object as PropType<dxHtmlEditorTableResizing | Record<string, any>>,
-    toolbar: Object as PropType<dxHtmlEditorToolbar | Record<string, any>>,
+    tableContextMenu: Object as PropType<dxHtmlEditorTableContextMenu | null | Record<string, any>>,
+    tableResizing: Object as PropType<dxHtmlEditorTableResizing | null | Record<string, any>>,
+    toolbar: Object as PropType<dxHtmlEditorToolbar | null | Record<string, any>>,
     validationError: {},
-    validationErrors: Array as PropType<Array<any>>,
+    validationErrors: Array as PropType<Array<any> | null>,
     validationMessageMode: String as PropType<ValidationMessageMode>,
     validationMessagePosition: String as PropType<Position>,
     validationStatus: String as PropType<ValidationStatus>,
     value: {},
-    variables: Object as PropType<dxHtmlEditorVariables | Record<string, any>>,
+    variables: Object as PropType<dxHtmlEditorVariables | null | Record<string, any>>,
     visible: Boolean,
     width: [Number, String]
   },
@@ -413,7 +413,7 @@ const DxFileUploaderOptionsConfig = {
     uploadMode: String as PropType<FileUploadMode>,
     uploadUrl: String,
     validationError: {},
-    validationErrors: Array as PropType<Array<any>>,
+    validationErrors: Array as PropType<Array<any> | null>,
     validationStatus: String as PropType<ValidationStatus>,
     value: Array as PropType<Array<any>>,
     visible: Boolean,
diff --git a/packages/devextreme-vue/src/list.ts b/packages/devextreme-vue/src/list.ts
index 541cfb96745d..13deec187046 100644
--- a/packages/devextreme-vue/src/list.ts
+++ b/packages/devextreme-vue/src/list.ts
@@ -201,7 +201,7 @@ const componentConfig = {
     itemHoldTimeout: Number,
     items: Array as PropType<Array<any | dxListItem | string>>,
     itemTemplate: {},
-    keyExpr: [Function, String] as PropType<(((item: any) => any)) | string>,
+    keyExpr: [Function, String] as PropType<(((item: any) => any)) | null | string>,
     menuItems: Array as PropType<Array<Record<string, any>>>,
     menuMode: String as PropType<ListMenuMode>,
     nextButtonText: String,
@@ -673,7 +673,7 @@ const DxSearchEditorOptionsConfig = {
     maskChar: String,
     maskInvalidMessage: String,
     maskRules: {},
-    maxLength: [Number, String],
+    maxLength: [Number, String] as PropType<null | number | string>,
     mode: String as PropType<TextBoxType>,
     name: String,
     onChange: Function as PropType<((e: ChangeEvent) => void)>,
@@ -702,7 +702,7 @@ const DxSearchEditorOptionsConfig = {
     text: String,
     useMaskedValue: Boolean,
     validationError: {},
-    validationErrors: Array as PropType<Array<any>>,
+    validationErrors: Array as PropType<Array<any> | null>,
     validationMessageMode: String as PropType<ValidationMessageMode>,
     validationMessagePosition: String as PropType<Position>,
     validationStatus: String as PropType<ValidationStatus>,
diff --git a/packages/devextreme-vue/src/lookup.ts b/packages/devextreme-vue/src/lookup.ts
index b18f6ecdf351..c1c59b98423f 100644
--- a/packages/devextreme-vue/src/lookup.ts
+++ b/packages/devextreme-vue/src/lookup.ts
@@ -237,7 +237,7 @@ const componentConfig = {
     useNativeScrolling: Boolean,
     usePopover: Boolean,
     validationError: {},
-    validationErrors: Array as PropType<Array<any>>,
+    validationErrors: Array as PropType<Array<any> | null>,
     validationMessageMode: String as PropType<ValidationMessageMode>,
     validationMessagePosition: String as PropType<Mode | Position>,
     validationStatus: String as PropType<ValidationStatus>,
diff --git a/packages/devextreme-vue/src/number-box.ts b/packages/devextreme-vue/src/number-box.ts
index a6a3340932f4..89f8c38b7c8b 100644
--- a/packages/devextreme-vue/src/number-box.ts
+++ b/packages/devextreme-vue/src/number-box.ts
@@ -155,7 +155,7 @@ const componentConfig = {
     text: String,
     useLargeSpinButtons: Boolean,
     validationError: {},
-    validationErrors: Array as PropType<Array<any>>,
+    validationErrors: Array as PropType<Array<any> | null>,
     validationMessageMode: String as PropType<ValidationMessageMode>,
     validationMessagePosition: String as PropType<Position>,
     validationStatus: String as PropType<ValidationStatus>,
diff --git a/packages/devextreme-vue/src/progress-bar.ts b/packages/devextreme-vue/src/progress-bar.ts
index 8508590aee99..f927ac46a684 100644
--- a/packages/devextreme-vue/src/progress-bar.ts
+++ b/packages/devextreme-vue/src/progress-bar.ts
@@ -72,7 +72,7 @@ const componentConfig = {
     showStatus: Boolean,
     statusFormat: [Function, String] as PropType<(((ratio: number, value: number) => string)) | string>,
     validationError: {},
-    validationErrors: Array as PropType<Array<any>>,
+    validationErrors: Array as PropType<Array<any> | null>,
     validationMessageMode: String as PropType<ValidationMessageMode>,
     validationMessagePosition: String as PropType<Position>,
     validationStatus: String as PropType<ValidationStatus>,
diff --git a/packages/devextreme-vue/src/radio-group.ts b/packages/devextreme-vue/src/radio-group.ts
index d19bd930dfa9..fb6527b01b84 100644
--- a/packages/devextreme-vue/src/radio-group.ts
+++ b/packages/devextreme-vue/src/radio-group.ts
@@ -94,7 +94,7 @@ const componentConfig = {
     rtlEnabled: Boolean,
     tabIndex: Number,
     validationError: {},
-    validationErrors: Array as PropType<Array<any>>,
+    validationErrors: Array as PropType<Array<any> | null>,
     validationMessageMode: String as PropType<ValidationMessageMode>,
     validationMessagePosition: String as PropType<Position>,
     validationStatus: String as PropType<ValidationStatus>,
diff --git a/packages/devextreme-vue/src/range-slider.ts b/packages/devextreme-vue/src/range-slider.ts
index 7bc0eccb72d2..eff249b51b3d 100644
--- a/packages/devextreme-vue/src/range-slider.ts
+++ b/packages/devextreme-vue/src/range-slider.ts
@@ -100,7 +100,7 @@ const componentConfig = {
     tabIndex: Number,
     tooltip: Object as PropType<Record<string, any>>,
     validationError: {},
-    validationErrors: Array as PropType<Array<any>>,
+    validationErrors: Array as PropType<Array<any> | null>,
     validationMessageMode: String as PropType<ValidationMessageMode>,
     validationMessagePosition: String as PropType<Position>,
     validationStatus: String as PropType<ValidationStatus>,
diff --git a/packages/devextreme-vue/src/select-box.ts b/packages/devextreme-vue/src/select-box.ts
index 9f09704f7d12..2fcbcaddd497 100644
--- a/packages/devextreme-vue/src/select-box.ts
+++ b/packages/devextreme-vue/src/select-box.ts
@@ -215,7 +215,7 @@ const componentConfig = {
     itemTemplate: {},
     label: String,
     labelMode: String as PropType<LabelMode>,
-    maxLength: [Number, String],
+    maxLength: [Number, String] as PropType<null | number | string>,
     minSearchLength: Number,
     name: String,
     noDataText: String,
@@ -259,7 +259,7 @@ const componentConfig = {
     text: String,
     useItemTextAsTitle: Boolean,
     validationError: {},
-    validationErrors: Array as PropType<Array<any>>,
+    validationErrors: Array as PropType<Array<any> | null>,
     validationMessageMode: String as PropType<ValidationMessageMode>,
     validationMessagePosition: String as PropType<Mode | Position>,
     validationStatus: String as PropType<ValidationStatus>,
diff --git a/packages/devextreme-vue/src/slider.ts b/packages/devextreme-vue/src/slider.ts
index 45e500dfead8..596ebd42b828 100644
--- a/packages/devextreme-vue/src/slider.ts
+++ b/packages/devextreme-vue/src/slider.ts
@@ -94,7 +94,7 @@ const componentConfig = {
     tabIndex: Number,
     tooltip: Object as PropType<Record<string, any>>,
     validationError: {},
-    validationErrors: Array as PropType<Array<any>>,
+    validationErrors: Array as PropType<Array<any> | null>,
     validationMessageMode: String as PropType<ValidationMessageMode>,
     validationMessagePosition: String as PropType<Position>,
     validationStatus: String as PropType<ValidationStatus>,
diff --git a/packages/devextreme-vue/src/switch.ts b/packages/devextreme-vue/src/switch.ts
index 8d8af35a3833..52cee2829201 100644
--- a/packages/devextreme-vue/src/switch.ts
+++ b/packages/devextreme-vue/src/switch.ts
@@ -75,7 +75,7 @@ const componentConfig = {
     switchedOnText: String,
     tabIndex: Number,
     validationError: {},
-    validationErrors: Array as PropType<Array<any>>,
+    validationErrors: Array as PropType<Array<any> | null>,
     validationMessageMode: String as PropType<ValidationMessageMode>,
     validationMessagePosition: String as PropType<Position>,
     validationStatus: String as PropType<ValidationStatus>,
diff --git a/packages/devextreme-vue/src/tabs.ts b/packages/devextreme-vue/src/tabs.ts
index 17e7999dbda8..557e5a83e587 100644
--- a/packages/devextreme-vue/src/tabs.ts
+++ b/packages/devextreme-vue/src/tabs.ts
@@ -91,7 +91,7 @@ const componentConfig = {
     itemHoldTimeout: Number,
     items: Array as PropType<Array<any | dxTabsItem | string>>,
     itemTemplate: {},
-    keyExpr: [Function, String] as PropType<(((item: any) => any)) | string>,
+    keyExpr: [Function, String] as PropType<(((item: any) => any)) | null | string>,
     noDataText: String,
     onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>,
     onDisposing: Function as PropType<((e: DisposingEvent) => void)>,
diff --git a/packages/devextreme-vue/src/tag-box.ts b/packages/devextreme-vue/src/tag-box.ts
index 26f27f764251..a8a1fdd821dd 100644
--- a/packages/devextreme-vue/src/tag-box.ts
+++ b/packages/devextreme-vue/src/tag-box.ts
@@ -225,7 +225,7 @@ const componentConfig = {
     labelMode: String as PropType<LabelMode>,
     maxDisplayedTags: Number,
     maxFilterQueryLength: Number,
-    maxLength: [Number, String],
+    maxLength: [Number, String] as PropType<null | number | string>,
     minSearchLength: Number,
     multiline: Boolean,
     name: String,
@@ -272,7 +272,7 @@ const componentConfig = {
     text: String,
     useItemTextAsTitle: Boolean,
     validationError: {},
-    validationErrors: Array as PropType<Array<any>>,
+    validationErrors: Array as PropType<Array<any> | null>,
     validationMessageMode: String as PropType<ValidationMessageMode>,
     validationMessagePosition: String as PropType<Mode | Position>,
     validationStatus: String as PropType<ValidationStatus>,
diff --git a/packages/devextreme-vue/src/text-area.ts b/packages/devextreme-vue/src/text-area.ts
index 642c5b7882af..ccff14c52fe3 100644
--- a/packages/devextreme-vue/src/text-area.ts
+++ b/packages/devextreme-vue/src/text-area.ts
@@ -100,7 +100,7 @@ const componentConfig = {
     label: String,
     labelMode: String as PropType<LabelMode>,
     maxHeight: [Number, String],
-    maxLength: [Number, String],
+    maxLength: [Number, String] as PropType<null | number | string>,
     minHeight: [Number, String],
     name: String,
     onChange: Function as PropType<((e: ChangeEvent) => void)>,
@@ -126,7 +126,7 @@ const componentConfig = {
     tabIndex: Number,
     text: String,
     validationError: {},
-    validationErrors: Array as PropType<Array<any>>,
+    validationErrors: Array as PropType<Array<any> | null>,
     validationMessageMode: String as PropType<ValidationMessageMode>,
     validationMessagePosition: String as PropType<Position>,
     validationStatus: String as PropType<ValidationStatus>,
diff --git a/packages/devextreme-vue/src/text-box.ts b/packages/devextreme-vue/src/text-box.ts
index de9e1d52f1a0..3e8d5585e12b 100644
--- a/packages/devextreme-vue/src/text-box.ts
+++ b/packages/devextreme-vue/src/text-box.ts
@@ -125,7 +125,7 @@ const componentConfig = {
     maskChar: String,
     maskInvalidMessage: String,
     maskRules: {},
-    maxLength: [Number, String],
+    maxLength: [Number, String] as PropType<null | number | string>,
     mode: String as PropType<TextBoxType>,
     name: String,
     onChange: Function as PropType<((e: ChangeEvent) => void)>,
@@ -154,7 +154,7 @@ const componentConfig = {
     text: String,
     useMaskedValue: Boolean,
     validationError: {},
-    validationErrors: Array as PropType<Array<any>>,
+    validationErrors: Array as PropType<Array<any> | null>,
     validationMessageMode: String as PropType<ValidationMessageMode>,
     validationMessagePosition: String as PropType<Position>,
     validationStatus: String as PropType<ValidationStatus>,
diff --git a/packages/devextreme-vue/src/tree-list.ts b/packages/devextreme-vue/src/tree-list.ts
index a6abed1aea26..5fcbda89e67f 100644
--- a/packages/devextreme-vue/src/tree-list.ts
+++ b/packages/devextreme-vue/src/tree-list.ts
@@ -1761,7 +1761,7 @@ const DxEditorOptionsConfig = {
     maskChar: String,
     maskInvalidMessage: String,
     maskRules: {},
-    maxLength: [Number, String],
+    maxLength: [Number, String] as PropType<null | number | string>,
     mode: String as PropType<TextBoxType>,
     name: String,
     onChange: Function as PropType<((e: ChangeEvent) => void)>,
@@ -1790,7 +1790,7 @@ const DxEditorOptionsConfig = {
     text: String,
     useMaskedValue: Boolean,
     validationError: {},
-    validationErrors: Array as PropType<Array<any>>,
+    validationErrors: Array as PropType<Array<any> | null>,
     validationMessageMode: String as PropType<ValidationMessageMode>,
     validationMessagePosition: String as PropType<Position>,
     validationStatus: String as PropType<ValidationStatus>,
diff --git a/packages/devextreme-vue/src/tree-view.ts b/packages/devextreme-vue/src/tree-view.ts
index 3300c962b618..fcf303319d3a 100644
--- a/packages/devextreme-vue/src/tree-view.ts
+++ b/packages/devextreme-vue/src/tree-view.ts
@@ -506,7 +506,7 @@ const DxSearchEditorOptionsConfig = {
     maskChar: String,
     maskInvalidMessage: String,
     maskRules: {},
-    maxLength: [Number, String],
+    maxLength: [Number, String] as PropType<null | number | string>,
     mode: String as PropType<TextBoxType>,
     name: String,
     onChange: Function as PropType<((e: ChangeEvent) => void)>,
@@ -535,7 +535,7 @@ const DxSearchEditorOptionsConfig = {
     text: String,
     useMaskedValue: Boolean,
     validationError: {},
-    validationErrors: Array as PropType<Array<any>>,
+    validationErrors: Array as PropType<Array<any> | null>,
     validationMessageMode: String as PropType<ValidationMessageMode>,
     validationMessagePosition: String as PropType<Position>,
     validationStatus: String as PropType<ValidationStatus>,
diff --git a/packages/devextreme/js/__internal/core/widget/component.ts b/packages/devextreme/js/__internal/core/widget/component.ts
index e13f3f9f47af..ac0cf9abd18f 100644
--- a/packages/devextreme/js/__internal/core/widget/component.ts
+++ b/packages/devextreme/js/__internal/core/widget/component.ts
@@ -123,9 +123,9 @@ export class Component<
 
   _getDefaultOptions(): TProperties {
     return {
-      onInitialized: null,
-      onOptionChanged: null,
-      onDisposing: null,
+      onInitialized: undefined,
+      onOptionChanged: undefined,
+      onDisposing: undefined,
 
       defaultOptionsRules: null,
     } as unknown as TProperties;
diff --git a/packages/devextreme/js/__internal/core/widget/widget.ts b/packages/devextreme/js/__internal/core/widget/widget.ts
index fa32c17fc460..daa60050fe2a 100644
--- a/packages/devextreme/js/__internal/core/widget/widget.ts
+++ b/packages/devextreme/js/__internal/core/widget/widget.ts
@@ -125,7 +125,7 @@ class Widget<
       visible: true,
       hint: undefined,
       activeStateEnabled: false,
-      onContentReady: null,
+      onContentReady: undefined,
       hoverStateEnabled: false,
       focusStateEnabled: false,
       tabIndex: 0,
diff --git a/packages/devextreme/js/__internal/ui/accordion.ts b/packages/devextreme/js/__internal/ui/accordion.ts
index 135238bb4f86..2a6c74f575a4 100644
--- a/packages/devextreme/js/__internal/ui/accordion.ts
+++ b/packages/devextreme/js/__internal/ui/accordion.ts
@@ -62,7 +62,6 @@ class Accordion extends CollectionWidgetLiveUpdate<AccordionProperties, Item, Co
       ...super._getDefaultOptions(),
       hoverStateEnabled: true,
       itemTitleTemplate: 'title',
-      // @ts-expect-error ts-error
       onItemTitleClick: null,
       selectedIndex: 0,
       collapsible: false,
diff --git a/packages/devextreme/js/__internal/ui/action_sheet.ts b/packages/devextreme/js/__internal/ui/action_sheet.ts
index b81109ddc007..2f598ec2d0a5 100644
--- a/packages/devextreme/js/__internal/ui/action_sheet.ts
+++ b/packages/devextreme/js/__internal/ui/action_sheet.ts
@@ -52,7 +52,6 @@ class ActionSheet extends CollectionWidget<Properties> {
       showTitle: true,
       showCancelButton: true,
       cancelText: messageLocalization.format('Cancel'),
-      // @ts-expect-error ts-error
       onCancelClick: null,
       visible: false,
       noDataText: '',
diff --git a/packages/devextreme/js/__internal/ui/button_group.ts b/packages/devextreme/js/__internal/ui/button_group.ts
index 7ee13d621c5e..a5a5ebd9e582 100644
--- a/packages/devextreme/js/__internal/ui/button_group.ts
+++ b/packages/devextreme/js/__internal/ui/button_group.ts
@@ -177,10 +177,8 @@ class ButtonGroup extends Widget<Properties> {
       keyExpr: 'text',
       items: [],
       buttonTemplate: 'content',
-      // @ts-expect-error ts-error
-      onSelectionChanged: null,
-      // @ts-expect-error ts-error
-      onItemClick: null,
+      onSelectionChanged: undefined,
+      onItemClick: undefined,
     };
   }
 
diff --git a/packages/devextreme/js/__internal/ui/calendar/calendar.base_view.ts b/packages/devextreme/js/__internal/ui/calendar/calendar.base_view.ts
index 0253b64daa8a..98060dfac0c9 100644
--- a/packages/devextreme/js/__internal/ui/calendar/calendar.base_view.ts
+++ b/packages/devextreme/js/__internal/ui/calendar/calendar.base_view.ts
@@ -89,7 +89,7 @@ export interface BaseViewProperties extends WidgetProperties {
 
   colCount: number;
 
-  disabledDates?: Date[] | ((data: DisabledDate) => boolean);
+  disabledDates?: Date[] | ((data: DisabledDate) => boolean) | null;
 
   zoomLevel?: CalendarZoomLevel;
 
diff --git a/packages/devextreme/js/__internal/ui/collection/collection_widget.base.ts b/packages/devextreme/js/__internal/ui/collection/collection_widget.base.ts
index 2a4bdfa737f8..5e7b3b98d00d 100644
--- a/packages/devextreme/js/__internal/ui/collection/collection_widget.base.ts
+++ b/packages/devextreme/js/__internal/ui/collection/collection_widget.base.ts
@@ -255,12 +255,12 @@ class CollectionWidget<
       loopItemFocus: true,
       items: [],
       itemTemplate: 'item',
-      onItemRendered: null,
-      onItemClick: null,
-      onItemHold: null,
+      onItemRendered: undefined,
+      onItemClick: undefined,
+      onItemHold: undefined,
       itemHoldTimeout: 750,
-      onItemContextMenu: null,
-      onFocusedItemChanged: null,
+      onItemContextMenu: undefined,
+      onFocusedItemChanged: undefined,
       noDataText: messageLocalization.format('dxCollectionWidget-noDataText'),
       encodeNoDataText: false,
       dataSource: null,
diff --git a/packages/devextreme/js/__internal/ui/collection/collection_widget.edit.ts b/packages/devextreme/js/__internal/ui/collection/collection_widget.edit.ts
index 405d7e379b92..06d89a472973 100644
--- a/packages/devextreme/js/__internal/ui/collection/collection_widget.edit.ts
+++ b/packages/devextreme/js/__internal/ui/collection/collection_widget.edit.ts
@@ -118,11 +118,11 @@ class CollectionWidget<
       selectedIndex: NOT_EXISTING_INDEX,
       focusOnSelectedItem: true,
       selectedItem: null,
-      onSelectionChanging: null,
-      onSelectionChanged: null,
-      onItemReordered: null,
-      onItemDeleting: null,
-      onItemDeleted: null,
+      onSelectionChanging: undefined,
+      onSelectionChanged: undefined,
+      onItemReordered: undefined,
+      onItemDeleting: undefined,
+      onItemDeleted: undefined,
     };
   }
 
diff --git a/packages/devextreme/js/__internal/ui/color_box/color_box.ts b/packages/devextreme/js/__internal/ui/color_box/color_box.ts
index 46ee6b22c6b4..ff8e108b10e8 100644
--- a/packages/devextreme/js/__internal/ui/color_box/color_box.ts
+++ b/packages/devextreme/js/__internal/ui/color_box/color_box.ts
@@ -116,7 +116,6 @@ class ColorBox extends DropDownEditor<ColorBoxProperties> {
       editAlphaChannel: false,
       applyValueMode: 'useButtons',
       keyStep: 1,
-      // @ts-expect-error fieldTemplate is deprecated --- IGNORE ---
       fieldTemplate: null,
       buttonsLocation: 'bottom after',
     };
diff --git a/packages/devextreme/js/__internal/ui/context_menu/context_menu.ts b/packages/devextreme/js/__internal/ui/context_menu/context_menu.ts
index 5adf0be26435..35b88009a7ed 100644
--- a/packages/devextreme/js/__internal/ui/context_menu/context_menu.ts
+++ b/packages/devextreme/js/__internal/ui/context_menu/context_menu.ts
@@ -183,12 +183,12 @@ class ContextMenu<
         at: 'top left',
         my: 'top left',
       },
-      onShowing: null,
-      onShown: null,
+      onShowing: undefined,
+      onShown: undefined,
       onSubmenuCreated: null,
-      onHiding: null,
-      onHidden: null,
-      onPositioning: null,
+      onHiding: undefined,
+      onHidden: undefined,
+      onPositioning: undefined,
       submenuDirection: 'auto',
       visible: false,
       target: undefined,
diff --git a/packages/devextreme/js/__internal/ui/date_box/date_box.base.ts b/packages/devextreme/js/__internal/ui/date_box/date_box.base.ts
index dd0786c15623..6f87812d9349 100644
--- a/packages/devextreme/js/__internal/ui/date_box/date_box.base.ts
+++ b/packages/devextreme/js/__internal/ui/date_box/date_box.base.ts
@@ -74,6 +74,7 @@ export interface DateBoxBaseProperties extends Omit<Properties, 'onClosed' | 'on
   buttonsLocation?: string;
   emptyDateValue?: Date;
   _showValidationIcon?: boolean;
+  useHiddenSubmitElement?: boolean;
 }
 
 class DateBox extends DropDownEditor<DateBoxBaseProperties> {
@@ -104,10 +105,8 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
       type: 'date',
       showAnalogClock: true,
       value: null,
-      // @ts-expect-error ts-error
       displayFormat: null,
       interval: 30,
-      // @ts-expect-error ts-error
       disabledDates: null,
       pickerType: PICKER_TYPE.calendar,
       invalidDateMessage: messageLocalization.format('dxDateBox-validation-datetime'),
diff --git a/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.calendar.ts b/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.calendar.ts
index 4de85e79e16d..6eb30e302e44 100644
--- a/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.calendar.ts
+++ b/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.calendar.ts
@@ -94,7 +94,7 @@ class CalendarStrategy extends DateBoxStrategy {
     };
   }
 
-  getDisplayFormat(displayFormat?: Format): Format {
+  getDisplayFormat(displayFormat?: Format | null): Format {
     const globalDateFormat = getGlobalFormatByDataType('date');
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     return displayFormat || globalDateFormat || 'shortdate';
diff --git a/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.calendar_with_time.ts b/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.calendar_with_time.ts
index c2e4a3e5ab61..d7fa093477bf 100644
--- a/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.calendar_with_time.ts
+++ b/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.calendar_with_time.ts
@@ -56,7 +56,7 @@ class CalendarWithTimeStrategy extends CalendarStrategy {
     return dateUtils.sameDate(this._getContouredValue(), this.widgetOption('value'));
   }
 
-  getDisplayFormat(displayFormat?: Format): Format {
+  getDisplayFormat(displayFormat?: Format | null): Format {
     const globalDateTimeFormat = getGlobalFormatByDataType('datetime');
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     return displayFormat || globalDateTimeFormat || 'shortdateshorttime';
diff --git a/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.date_view.ts b/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.date_view.ts
index 2b0fe805ff17..23521c767da4 100644
--- a/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.date_view.ts
+++ b/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.date_view.ts
@@ -38,7 +38,7 @@ class DateViewStrategy extends DateBoxStrategy {
     };
   }
 
-  getDisplayFormat(displayFormat: Format): Format {
+  getDisplayFormat(displayFormat: Format | null): Format {
     const { type = 'date' } = this.dateBox.option();
     const globalFormat = type === 'date' || type === 'datetime'
       ? getGlobalFormatByDataType(type)
diff --git a/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.list.ts b/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.list.ts
index ea2157dab71e..66f0ea1a6958 100644
--- a/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.list.ts
+++ b/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.list.ts
@@ -59,7 +59,7 @@ class ListStrategy extends DateBoxStrategy {
     };
   }
 
-  getDisplayFormat(displayFormat?: Format): Format {
+  getDisplayFormat(displayFormat?: Format | null): Format {
     const globalTimeFormat = getGlobalFormatByDataType('time');
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     return displayFormat || globalTimeFormat || 'shorttime';
diff --git a/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.native.ts b/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.native.ts
index 5b0124f2de39..d61a4ed8cbbd 100644
--- a/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.native.ts
+++ b/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.native.ts
@@ -71,7 +71,7 @@ class NativeStrategy extends DateBoxStrategy {
     };
   }
 
-  getDisplayFormat(displayFormat?: Format): Format {
+  getDisplayFormat(displayFormat?: Format | null): Format {
     const type = this._getDateBoxType();
     const globalFormat = type === 'date' || type === 'datetime' || type === 'datetime-local'
       ? getGlobalFormatByDataType(type === 'datetime-local' ? 'datetime' : type)
diff --git a/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.ts b/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.ts
index 9a9fb5132150..74a3c9c27e85 100644
--- a/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.ts
+++ b/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.ts
@@ -62,8 +62,8 @@ class DateBoxStrategy extends (Class.inherit({}) as new() => {}) {
     return { mode: 'text' };
   }
 
-  getDisplayFormat(displayFormat: Format): Format {
-    return displayFormat;
+  getDisplayFormat(displayFormat?: Format | null): Format {
+    return displayFormat || 'shortdate';
   }
 
   supportedKeys(): Record<string, (e: KeyboardEvent) => void> {
diff --git a/packages/devextreme/js/__internal/ui/date_range_box/m_date_range_box.ts b/packages/devextreme/js/__internal/ui/date_range_box/m_date_range_box.ts
index 419c27fa56a0..b1940dd493d0 100644
--- a/packages/devextreme/js/__internal/ui/date_range_box/m_date_range_box.ts
+++ b/packages/devextreme/js/__internal/ui/date_range_box/m_date_range_box.ts
@@ -122,7 +122,7 @@ class DateRangeBox extends Editor<Properties> {
       onKeyUp: null,
       onOpened: null,
       onPaste: null,
-      onValueChanged: null,
+      onValueChanged: undefined,
       openOnFieldClick: true,
       opened: false,
       pickerType: 'calendar',
diff --git a/packages/devextreme/js/__internal/ui/diagram/ui.diagram.ts b/packages/devextreme/js/__internal/ui/diagram/ui.diagram.ts
index 4da7b2fc7823..9c264445de99 100644
--- a/packages/devextreme/js/__internal/ui/diagram/ui.diagram.ts
+++ b/packages/devextreme/js/__internal/ui/diagram/ui.diagram.ts
@@ -2311,15 +2311,15 @@ class Diagram extends Widget<Properties> {
         fileName: 'Diagram',
       },
 
-      onItemClick: null,
+      onItemClick: undefined,
 
-      onItemDblClick: null,
+      onItemDblClick: undefined,
 
-      onSelectionChanged: null,
+      onSelectionChanged: undefined,
 
-      onRequestEditOperation: null,
+      onRequestEditOperation: undefined,
 
-      onRequestLayoutUpdate: null,
+      onRequestLayoutUpdate: undefined,
     });
   }
 
diff --git a/packages/devextreme/js/__internal/ui/drawer/drawer.ts b/packages/devextreme/js/__internal/ui/drawer/drawer.ts
index fd6fee3de954..4e976ba9e49f 100644
--- a/packages/devextreme/js/__internal/ui/drawer/drawer.ts
+++ b/packages/devextreme/js/__internal/ui/drawer/drawer.ts
@@ -76,9 +76,7 @@ class Drawer extends Widget<DrawerProperties> {
       ...super._getDefaultOptions(),
       position: 'left',
       opened: false,
-      // @ts-expect-error ts-error
       minSize: null,
-      // @ts-expect-error ts-error
       maxSize: null,
       shading: false,
       template: PANEL_TEMPLATE_NAME,
diff --git a/packages/devextreme/js/__internal/ui/editor/editor.ts b/packages/devextreme/js/__internal/ui/editor/editor.ts
index b1fbf5a2be98..d51319178a2f 100644
--- a/packages/devextreme/js/__internal/ui/editor/editor.ts
+++ b/packages/devextreme/js/__internal/ui/editor/editor.ts
@@ -117,7 +117,7 @@ class Editor<
       ...super._getDefaultOptions(),
       value: null,
       name: '',
-      onValueChanged: null,
+      onValueChanged: undefined,
       readOnly: false,
       isValid: true,
       validationError: null,
@@ -262,7 +262,7 @@ class Editor<
     this.$element().addClass(stylingModeClass);
   }
 
-  _getValidationErrors(): unknown[] | undefined {
+  _getValidationErrors(): unknown[] | null | undefined {
     let { validationErrors } = this.option();
     const { validationError } = this.option();
 
diff --git a/packages/devextreme/js/__internal/ui/file_uploader/file_uploader.ts b/packages/devextreme/js/__internal/ui/file_uploader/file_uploader.ts
index 813ef46d3855..470becfce690 100644
--- a/packages/devextreme/js/__internal/ui/file_uploader/file_uploader.ts
+++ b/packages/devextreme/js/__internal/ui/file_uploader/file_uploader.ts
@@ -206,16 +206,16 @@ class FileUploader extends Editor<FileUploaderProperties> {
         uploadMethod: 'POST',
         uploadHeaders: {},
         uploadCustomData: {},
-        onBeforeSend: null,
-        onUploadStarted: null,
-        onUploaded: null,
-        onFilesUploaded: null,
+        onBeforeSend: undefined,
+        onUploadStarted: undefined,
+        onUploaded: undefined,
+        onFilesUploaded: undefined,
         onFileValidationError: null,
-        onProgress: null,
-        onUploadError: null,
-        onUploadAborted: null,
-        onDropZoneEnter: null,
-        onDropZoneLeave: null,
+        onProgress: undefined,
+        onUploadError: undefined,
+        onUploadAborted: undefined,
+        onDropZoneEnter: undefined,
+        onDropZoneLeave: undefined,
         onCancelButtonClick: null,
         onFileLimitReached: undefined,
         allowedFileExtensions: [],
diff --git a/packages/devextreme/js/__internal/ui/form/form.layout_manager.ts b/packages/devextreme/js/__internal/ui/form/form.layout_manager.ts
index b39e20fe9e5e..22ae328b1a44 100644
--- a/packages/devextreme/js/__internal/ui/form/form.layout_manager.ts
+++ b/packages/devextreme/js/__internal/ui/form/form.layout_manager.ts
@@ -149,17 +149,13 @@ class LayoutManager extends Widget<LayoutManagerProperties> {
       readOnly: false,
       colCount: 1,
       labelLocation: 'left',
-      // @ts-expect-error ts-error
-      onFieldDataChanged: null,
-      // @ts-expect-error ts-error
-      onEditorEnterKey: null,
-      // @ts-expect-error ts-error
-      customizeItem: null,
+      onFieldDataChanged: undefined,
+      onEditorEnterKey: undefined,
+      customizeItem: undefined,
       alignItemLabels: true,
       minColWidth: MIN_COLUMN_WIDTH,
       showRequiredMark: true,
-      // @ts-expect-error ts-error
-      screenByWidth: null,
+      screenByWidth: undefined,
       showOptionalMark: false,
       requiredMark: '*',
       labelMode: 'outside',
diff --git a/packages/devextreme/js/__internal/ui/form/form.ts b/packages/devextreme/js/__internal/ui/form/form.ts
index 6b4d70e9698f..6db99fccc810 100644
--- a/packages/devextreme/js/__internal/ui/form/form.ts
+++ b/packages/devextreme/js/__internal/ui/form/form.ts
@@ -203,12 +203,9 @@ class Form extends Widget<FormProperties> {
       screenByWidth: defaultScreenFactorFunc,
       labelLocation: 'left',
       readOnly: false,
-      // @ts-expect-error ts-error
-      onFieldDataChanged: null,
-      // @ts-expect-error ts-error
-      customizeItem: null,
-      // @ts-expect-error ts-error
-      onEditorEnterKey: null,
+      onFieldDataChanged: undefined,
+      customizeItem: undefined,
+      onEditorEnterKey: undefined,
       minColWidth: 200,
       alignItemLabels: true,
       alignItemLabelsInAllGroups: true,
@@ -225,10 +222,8 @@ class Form extends Widget<FormProperties> {
       stylingMode: config().editorStylingMode,
       labelMode: 'outside',
       isDirty: false,
-      // @ts-expect-error ts-error
-      onSmartPasting: null,
-      // @ts-expect-error ts-error
-      onSmartPasted: null,
+      onSmartPasting: undefined,
+      onSmartPasted: undefined,
     };
   }
 
diff --git a/packages/devextreme/js/__internal/ui/gantt/ui.gantt.helper.ts b/packages/devextreme/js/__internal/ui/gantt/ui.gantt.helper.ts
index 490c9010e4c8..f15e51fd5393 100644
--- a/packages/devextreme/js/__internal/ui/gantt/ui.gantt.helper.ts
+++ b/packages/devextreme/js/__internal/ui/gantt/ui.gantt.helper.ts
@@ -157,33 +157,33 @@ export const GanttHelper = {
       taskTitlePosition: 'inside',
       firstDayOfWeek: undefined,
       selectedRowKey: undefined,
-      onSelectionChanged: null,
-      onTaskClick: null,
-      onTaskDblClick: null,
-      onTaskInserting: null,
-      onTaskInserted: null,
-      onTaskDeleting: null,
-      onTaskDeleted: null,
-      onTaskUpdating: null,
-      onTaskUpdated: null,
-      onTaskMoving: null,
-      onTaskEditDialogShowing: null,
-      onDependencyInserting: null,
-      onDependencyInserted: null,
-      onDependencyDeleting: null,
-      onDependencyDeleted: null,
-      onResourceInserting: null,
-      onResourceInserted: null,
-      onResourceDeleting: null,
-      onResourceDeleted: null,
-      onResourceAssigning: null,
-      onResourceAssigned: null,
-
-      onResourceUnassigning: null,
-
-      onResourceUnassigned: null,
-      onCustomCommand: null,
-      onContextMenuPreparing: null,
+      onSelectionChanged: undefined,
+      onTaskClick: undefined,
+      onTaskDblClick: undefined,
+      onTaskInserting: undefined,
+      onTaskInserted: undefined,
+      onTaskDeleting: undefined,
+      onTaskDeleted: undefined,
+      onTaskUpdating: undefined,
+      onTaskUpdated: undefined,
+      onTaskMoving: undefined,
+      onTaskEditDialogShowing: undefined,
+      onDependencyInserting: undefined,
+      onDependencyInserted: undefined,
+      onDependencyDeleting: undefined,
+      onDependencyDeleted: undefined,
+      onResourceInserting: undefined,
+      onResourceInserted: undefined,
+      onResourceDeleting: undefined,
+      onResourceDeleted: undefined,
+      onResourceAssigning: undefined,
+      onResourceAssigned: undefined,
+
+      onResourceUnassigning: undefined,
+
+      onResourceUnassigned: undefined,
+      onCustomCommand: undefined,
+      onContextMenuPreparing: undefined,
       allowSelection: true,
       showRowLines: true,
       stripLines: undefined,
diff --git a/packages/devextreme/js/__internal/ui/hierarchical_collection/data_adapter.ts b/packages/devextreme/js/__internal/ui/hierarchical_collection/data_adapter.ts
index 45a677eae82b..4e5370ec834f 100644
--- a/packages/devextreme/js/__internal/ui/hierarchical_collection/data_adapter.ts
+++ b/packages/devextreme/js/__internal/ui/hierarchical_collection/data_adapter.ts
@@ -47,7 +47,7 @@ export interface DataAdapterOptions {
   dataType: DataStructure;
   sort: SortOption | SortOption[] | null;
   langParams?: LangParams;
-  searchExpr?: string | Function | (string | Function)[] | ((item: ItemData) => unknown);
+  searchExpr?: string | Function | (string | Function)[] | ((item: ItemData) => unknown) | null;
 
   dataConverter: HierarchicalDataConverter;
   onNodeChanged: (node: InternalNode) => void;
diff --git a/packages/devextreme/js/__internal/ui/html_editor/html_editor.ts b/packages/devextreme/js/__internal/ui/html_editor/html_editor.ts
index efaac05e9405..f39ca4d681a2 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/html_editor.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/html_editor.ts
@@ -113,29 +113,19 @@ class HtmlEditor extends Editor<Properties> {
 
     return {
       ...super._getDefaultOptions(),
-      // @ts-expect-error undefined is not allowed
-      aiIntegration: null,
+      aiIntegration: undefined,
       allowSoftLineBreak: false,
-      // @ts-expect-error undefined is not allowed
-      converter: null,
-      // @ts-expect-error undefined is not allowed
-      customizeModules: null,
+      converter: undefined,
+      customizeModules: undefined,
       focusStateEnabled: true,
-      // @ts-expect-error undefined is not allowed
-      imageUpload: null,
-      // @ts-expect-error undefined is not allowed
+      imageUpload: undefined,
       mediaResizing: null,
-      // @ts-expect-error undefined is not allowed
       mentions: null,
       placeholder: '',
       stylingMode,
-      // @ts-expect-error undefined is not allowed
       tableContextMenu: null,
-      // @ts-expect-error undefined is not allowed
       tableResizing: null,
-      // @ts-expect-error undefined is not allowed
       toolbar: null,
-      // @ts-expect-error undefined is not allowed
       variables: null,
     };
   }
diff --git a/packages/devextreme/js/__internal/ui/list/list.base.ts b/packages/devextreme/js/__internal/ui/list/list.base.ts
index 970fd478ac03..4bcf638d67db 100644
--- a/packages/devextreme/js/__internal/ui/list/list.base.ts
+++ b/packages/devextreme/js/__internal/ui/list/list.base.ts
@@ -275,19 +275,14 @@ export class ListBase extends CollectionWidget<ListBaseProperties, Item> {
       pulledDownText: messageLocalization.format('dxList-pulledDownText'),
       refreshingText: messageLocalization.format('dxList-refreshingText'),
       pageLoadingText: messageLocalization.format('dxList-pageLoadingText'),
-      // @ts-expect-error ts-error
-      onScroll: null,
-      // @ts-expect-error ts-error
-      onPullRefresh: null,
-      // @ts-expect-error ts-error
-      onPageLoading: null,
+      onScroll: undefined,
+      onPullRefresh: undefined,
+      onPageLoading: undefined,
       pageLoadMode: 'scrollBottom',
       nextButtonText: messageLocalization.format('dxList-nextButtonText'),
-      // @ts-expect-error ts-error
-      onItemSwipe: null,
+      onItemSwipe: undefined,
       grouped: false,
-      // @ts-expect-error ts-error
-      onGroupRendered: null,
+      onGroupRendered: undefined,
       collapsibleGroups: false,
       groupTemplate: 'group',
       indicateLoading: true,
@@ -550,7 +545,7 @@ export class ListBase extends CollectionWidget<ListBaseProperties, Item> {
     | null
     | undefined {
     const { grouped } = this.option();
-    const dataSource = this.option('dataSource');
+    const dataSource = this.option('dataSource') as DataSourceLike<Item> | undefined;
 
     if (dataSource && grouped) {
       return getDataSourceOptions<Item>(dataSource);
@@ -598,10 +593,9 @@ export class ListBase extends CollectionWidget<ListBaseProperties, Item> {
       onScroll: (e: ScrollEvent): void => {
         this._scrollHandler(e);
       },
+      onPullDown: isPullRefreshEnabled ? this._pullDownHandler.bind(this) : undefined,
       // @ts-expect-error ts-error
-      onPullDown: isPullRefreshEnabled ? this._pullDownHandler.bind(this) : null,
-      // @ts-expect-error ts-error
-      onReachBottom: autoPagingEnabled ? this._scrollBottomHandler.bind(this) : null,
+      onReachBottom: autoPagingEnabled ? this._scrollBottomHandler.bind(this) : undefined,
       showScrollbar,
       useNative: useNativeScrolling,
       bounceEnabled,
@@ -1531,7 +1525,7 @@ export class ListBase extends CollectionWidget<ListBaseProperties, Item> {
     this._scrollView.scrollTo(location);
   }
 
-  scrollToItem(itemElement: number | Element | dxElementWrapper | Item | undefined): void {
+  scrollToItem(itemElement: number | Element | dxElementWrapper | Item | null | undefined): void {
     if (!isDefined(itemElement)) {
       return;
     }
diff --git a/packages/devextreme/js/__internal/ui/list/list.edit.search.ts b/packages/devextreme/js/__internal/ui/list/list.edit.search.ts
index ae9f96de4a6e..f590d87d9e7f 100644
--- a/packages/devextreme/js/__internal/ui/list/list.edit.search.ts
+++ b/packages/devextreme/js/__internal/ui/list/list.edit.search.ts
@@ -36,9 +36,7 @@ class ListSearch extends ListEdit {
   _getDefaultOptions(): ListBaseProperties {
     return {
       ...super._getDefaultOptions(),
-      // @ts-expect-error ts-error
-      searchMode: '',
-      // @ts-expect-error ts-error
+      searchMode: undefined,
       searchExpr: null,
       searchValue: '',
       searchEnabled: false,
diff --git a/packages/devextreme/js/__internal/ui/list/list.edit.ts b/packages/devextreme/js/__internal/ui/list/list.edit.ts
index 7236648c336e..8dee8715ff69 100644
--- a/packages/devextreme/js/__internal/ui/list/list.edit.ts
+++ b/packages/devextreme/js/__internal/ui/list/list.edit.ts
@@ -155,8 +155,7 @@ class ListEdit extends ListBase {
       showSelectionControls: false,
       selectionMode: 'none',
       selectAllMode: 'page',
-      // @ts-expect-error ts-error
-      onSelectAllValueChanged: null,
+      onSelectAllValueChanged: undefined,
       selectAllText: localizationMessage.format('dxList-selectAll'),
       menuItems: [],
       menuMode: 'context',
diff --git a/packages/devextreme/js/__internal/ui/lookup.ts b/packages/devextreme/js/__internal/ui/lookup.ts
index 59480ceab46c..461a78405986 100644
--- a/packages/devextreme/js/__internal/ui/lookup.ts
+++ b/packages/devextreme/js/__internal/ui/lookup.ts
@@ -135,12 +135,9 @@ class Lookup extends DropDownList<LookupProperties> {
       pulledDownText: messageLocalization.format('dxList-pulledDownText'),
       refreshingText: messageLocalization.format('dxList-refreshingText'),
       pageLoadingText: messageLocalization.format('dxList-pageLoadingText'),
-      // @ts-expect-error public API
-      onScroll: null,
-      // @ts-expect-error public API
-      onPullRefresh: null,
-      // @ts-expect-error public API
-      onPageLoading: null,
+      onScroll: undefined,
+      onPullRefresh: undefined,
+      onPageLoading: undefined,
       pageLoadMode: 'scrollBottom',
       nextButtonText: messageLocalization.format('dxList-nextButtonText'),
       grouped: false,
@@ -161,8 +158,7 @@ class Lookup extends DropDownList<LookupProperties> {
         animation: {},
         title: '',
         titleTemplate: 'title',
-        // @ts-expect-error ts-error
-        onTitleRendered: null,
+        onTitleRendered: undefined,
         fullScreen: false,
         maxHeight: '100vh',
       },
diff --git a/packages/devextreme/js/__internal/ui/m_progress_bar.ts b/packages/devextreme/js/__internal/ui/m_progress_bar.ts
index 7ea20b65260d..78ed7106d04d 100644
--- a/packages/devextreme/js/__internal/ui/m_progress_bar.ts
+++ b/packages/devextreme/js/__internal/ui/m_progress_bar.ts
@@ -43,8 +43,7 @@ class ProgressBar extends TrackBar<ProgressBarProperties> {
         return `Progress: ${Math.round(ratio * 100)}%`;
       },
       showStatus: true,
-      // @ts-expect-error ts-error
-      onComplete: null,
+      onComplete: undefined,
       activeStateEnabled: false,
       statusPosition: 'bottom left',
       _animatingSegmentCount: 0,
diff --git a/packages/devextreme/js/__internal/ui/map/map.ts b/packages/devextreme/js/__internal/ui/map/map.ts
index 8b987349f994..a57e5a94fa36 100644
--- a/packages/devextreme/js/__internal/ui/map/map.ts
+++ b/packages/devextreme/js/__internal/ui/map/map.ts
@@ -85,17 +85,12 @@ class Map extends Widget<MapProperties> {
       provider: 'google',
       autoAdjust: true,
       markers: [],
-      // @ts-expect-error ts-error
-      markerIconSrc: null,
-      // @ts-expect-error ts-error
-      onMarkerAdded: null,
-      // @ts-expect-error ts-error
-      onMarkerRemoved: null,
+      markerIconSrc: undefined,
+      onMarkerAdded: undefined,
+      onMarkerRemoved: undefined,
       routes: [],
-      // @ts-expect-error ts-error
-      onRouteAdded: null,
-      // @ts-expect-error ts-error
-      onRouteRemoved: null,
+      onRouteAdded: undefined,
+      onRouteRemoved: undefined,
       apiKey: {
         bing: '',
         google: '',
@@ -106,12 +101,8 @@ class Map extends Widget<MapProperties> {
         useAdvancedMarkers: true,
       },
       controls: false,
-      // @ts-expect-error ts-error
-      onReady: null,
-      // for internal use only
-      // @ts-expect-error ts-error
-      onUpdated: null,
-      // @ts-expect-error ts-error
+      onReady: undefined,
+      onUpdated: undefined,
       onClick: null,
     };
   }
diff --git a/packages/devextreme/js/__internal/ui/menu/menu.ts b/packages/devextreme/js/__internal/ui/menu/menu.ts
index dc90fa51ce72..89e96af91c79 100644
--- a/packages/devextreme/js/__internal/ui/menu/menu.ts
+++ b/packages/devextreme/js/__internal/ui/menu/menu.ts
@@ -166,14 +166,10 @@ class Menu extends MenuBase<MenuProperties> {
         },
       },
       hideSubmenuOnMouseLeave: false,
-      // @ts-expect-error ts-error
-      onSubmenuShowing: null,
-      // @ts-expect-error ts-error
-      onSubmenuShown: null,
-      // @ts-expect-error ts-error
-      onSubmenuHiding: null,
-      // @ts-expect-error ts-error
-      onSubmenuHidden: null,
+      onSubmenuShowing: undefined,
+      onSubmenuShown: undefined,
+      onSubmenuHiding: undefined,
+      onSubmenuHidden: undefined,
       adaptivityEnabled: false,
     };
   }
diff --git a/packages/devextreme/js/__internal/ui/popup/popup.ts b/packages/devextreme/js/__internal/ui/popup/popup.ts
index ad97b1deecf6..1b0d64db9f93 100644
--- a/packages/devextreme/js/__internal/ui/popup/popup.ts
+++ b/packages/devextreme/js/__internal/ui/popup/popup.ts
@@ -255,14 +255,14 @@ class Popup<
       title: '',
       showTitle: true,
       titleTemplate: 'title',
-      onTitleRendered: null,
+      onTitleRendered: undefined,
       dragOutsideBoundary: false,
       dragEnabled: false,
       enableBodyScroll: true,
       outsideDragFactor: 0,
-      onResizeStart: null,
-      onResize: null,
-      onResizeEnd: null,
+      onResizeStart: undefined,
+      onResize: undefined,
+      onResizeEnd: undefined,
       resizeEnabled: false,
       toolbarItems: [],
       showCloseButton: false,
diff --git a/packages/devextreme/js/__internal/ui/responsive_box.ts b/packages/devextreme/js/__internal/ui/responsive_box.ts
index cda2d72e7ccd..bf35b9bc5421 100644
--- a/packages/devextreme/js/__internal/ui/responsive_box.ts
+++ b/packages/devextreme/js/__internal/ui/responsive_box.ts
@@ -97,8 +97,7 @@ class ResponsiveBox extends CollectionWidget<ResponsiveBoxProperties> {
       rows: [],
       cols: [],
       singleColumnScreen: '',
-      // @ts-expect-error ts-error
-      screenByWidth: null,
+      screenByWidth: undefined,
       height: '100%',
       width: '100%',
       activeStateEnabled: false,
diff --git a/packages/devextreme/js/__internal/ui/scroll_view/scroll_view.ts b/packages/devextreme/js/__internal/ui/scroll_view/scroll_view.ts
index 96937d0cf73e..4d449f18c91a 100644
--- a/packages/devextreme/js/__internal/ui/scroll_view/scroll_view.ts
+++ b/packages/devextreme/js/__internal/ui/scroll_view/scroll_view.ts
@@ -105,10 +105,8 @@ export class ScrollView extends Scrollable<ScrollViewProperties> {
       pulledDownText: messageLocalization.format('dxScrollView-pulledDownText'),
       refreshingText: messageLocalization.format('dxScrollView-refreshingText'),
       reachBottomText: messageLocalization.format('dxScrollView-reachBottomText'),
-      // @ts-expect-error ts-error
-      onPullDown: null,
-      // @ts-expect-error ts-error
-      onReachBottom: null,
+      onPullDown: undefined,
+      onReachBottom: undefined,
       refreshStrategy: 'pullDown',
     };
   }
diff --git a/packages/devextreme/js/__internal/ui/speed_dial_action/m_speed_dial_action.ts b/packages/devextreme/js/__internal/ui/speed_dial_action/m_speed_dial_action.ts
index db190fcc6b08..b39b1981781b 100644
--- a/packages/devextreme/js/__internal/ui/speed_dial_action/m_speed_dial_action.ts
+++ b/packages/devextreme/js/__internal/ui/speed_dial_action/m_speed_dial_action.ts
@@ -20,7 +20,7 @@ class SpeedDialAction extends Widget<Properties> {
       label: '',
       visible: true,
       index: 0,
-      onContentReady: null,
+      onContentReady: undefined,
       activeStateEnabled: true,
       hoverStateEnabled: true,
       animation: {
diff --git a/packages/devextreme/js/__internal/ui/tab_panel/tab_panel.ts b/packages/devextreme/js/__internal/ui/tab_panel/tab_panel.ts
index 99c3a97a877e..0022f9aa56d5 100644
--- a/packages/devextreme/js/__internal/ui/tab_panel/tab_panel.ts
+++ b/packages/devextreme/js/__internal/ui/tab_panel/tab_panel.ts
@@ -115,12 +115,9 @@ class TabPanel extends MultiView<TabPanelProperties> {
       tabsPosition: TABS_POSITION.top,
       iconPosition: ICON_POSITION.start,
       stylingMode: STYLING_MODE.primary,
-      // @ts-expect-error ts-error
       onTitleClick: null,
-      // @ts-expect-error ts-error
-      onTitleHold: null,
-      // @ts-expect-error ts-error
-      onTitleRendered: null,
+      onTitleHold: undefined,
+      onTitleRendered: undefined,
       badgeExpr(data: Item): string | undefined {
         return data?.badge;
       },
diff --git a/packages/devextreme/js/__internal/ui/tag_box.ts b/packages/devextreme/js/__internal/ui/tag_box.ts
index 6fd3eb91e9e3..fcf746bd0215 100644
--- a/packages/devextreme/js/__internal/ui/tag_box.ts
+++ b/packages/devextreme/js/__internal/ui/tag_box.ts
@@ -426,13 +426,13 @@ class TagBox<
 
       selectAllMode: 'page',
 
-      onSelectAllValueChanged: null,
+      onSelectAllValueChanged: undefined,
 
       maxDisplayedTags: undefined,
 
       showMultiTagOnly: true,
 
-      onMultiTagPreparing: null,
+      onMultiTagPreparing: undefined,
 
       multiline: true,
 
diff --git a/packages/devextreme/js/common/charts.d.ts b/packages/devextreme/js/common/charts.d.ts
index 9e8a2ca24e04..8907a07b402e 100644
--- a/packages/devextreme/js/common/charts.d.ts
+++ b/packages/devextreme/js/common/charts.d.ts
@@ -255,7 +255,7 @@ export type VisualRange = {
     * @default undefined
     * @public
     */
-    length?: TimeIntervalConfig;
+    length?: TimeIntervalConfig | undefined;
     /**
     * @docid
     * @default undefined
diff --git a/packages/devextreme/js/core/component.d.ts b/packages/devextreme/js/core/component.d.ts
index d2cfd21921fb..22d7e9ced235 100644
--- a/packages/devextreme/js/core/component.d.ts
+++ b/packages/devextreme/js/core/component.d.ts
@@ -8,21 +8,21 @@ export interface ComponentOptions<TDisposingEvent, TInitializedEvent, TOptionCha
    * @docid
    * @type_function_param1 e:object
    * @type_function_param1_field component:this
-   * @default null
+   * @default undefined
    * @action
    * @public
    */
-  onDisposing?: ((e: TDisposingEvent) => void);
+  onDisposing?: ((e: TDisposingEvent) => void) | undefined;
   /**
    * @docid
    * @type_function_param1 e:object
    * @type_function_param1_field component:this
    * @type_function_param1_field element:DxElement
-   * @default null
+   * @default undefined
    * @action
    * @public
    */
-  onInitialized?: ((e: TInitializedEvent) => void);
+  onInitialized?: ((e: TInitializedEvent) => void) | undefined;
   /**
    * @docid
    * @type_function_param1 e:object
@@ -30,11 +30,11 @@ export interface ComponentOptions<TDisposingEvent, TInitializedEvent, TOptionCha
    * @type_function_param1_field name:string
    * @type_function_param1_field fullName:string
    * @type_function_param1_field value:any
-   * @default null
+   * @default undefined
    * @action
    * @public
    */
-  onOptionChanged?: ((e: TOptionChangedEvent) => void);
+  onOptionChanged?: ((e: TOptionChangedEvent) => void) | undefined;
 }
 /**
  * @docid Component
diff --git a/packages/devextreme/js/core/dom_component.d.ts b/packages/devextreme/js/core/dom_component.d.ts
index 8ab611de3705..1be32f99cc9d 100644
--- a/packages/devextreme/js/core/dom_component.d.ts
+++ b/packages/devextreme/js/core/dom_component.d.ts
@@ -48,19 +48,19 @@ export interface DOMComponentOptions<TComponent> extends ComponentOptions<
     /**
      * @docid
      * @action
-     * @default null
+     * @default undefined
      * @public
      */
-    onDisposing?: ((e: EventInfo<TComponent>) => void);
+    onDisposing?: ((e: EventInfo<TComponent>) => void) | undefined;
     /**
      * @docid
      * @action
-     * @default null
+     * @default undefined
      * @type_function_param1 e:object
      * @type_function_param1_field component:<DOMComponent>
      * @public
      */
-    onOptionChanged?: ((e: OptionChangedEventInfo<TComponent>) => void);
+    onOptionChanged?: ((e: OptionChangedEventInfo<TComponent>) => void) | undefined;
     /**
      * @docid
      * @default false
diff --git a/packages/devextreme/js/ui/accordion.d.ts b/packages/devextreme/js/ui/accordion.d.ts
index ced6b0d20555..b11df396c56b 100644
--- a/packages/devextreme/js/ui/accordion.d.ts
+++ b/packages/devextreme/js/ui/accordion.d.ts
@@ -201,7 +201,7 @@ export interface dxAccordionOptions<
      * @action
      * @public
      */
-    onItemTitleClick?: ((e: ItemTitleClickEvent<TItem, TKey>) => void) | string;
+    onItemTitleClick?: ((e: ItemTitleClickEvent<TItem, TKey>) => void) | string | null;
     /**
      * @docid
      * @default false
diff --git a/packages/devextreme/js/ui/action_sheet.d.ts b/packages/devextreme/js/ui/action_sheet.d.ts
index c05f626ebedd..ac7acd7d3804 100644
--- a/packages/devextreme/js/ui/action_sheet.d.ts
+++ b/packages/devextreme/js/ui/action_sheet.d.ts
@@ -144,7 +144,7 @@ export interface dxActionSheetOptions<
      * @action
      * @public
      */
-    onCancelClick?: ((e: CancelClickEvent<TItem, TKey>) => void) | string;
+    onCancelClick?: ((e: CancelClickEvent<TItem, TKey>) => void) | string | null;
     /**
      * @docid
      * @default true
@@ -234,7 +234,6 @@ export interface dxActionSheetItem<TKey = any> extends CollectionWidgetItem {
     icon?: string;
     /**
      * @docid
-     * @default null
      * @type_function_param1 e:NativeEventInfo
      * @type function
      * @public
diff --git a/packages/devextreme/js/ui/button.d.ts b/packages/devextreme/js/ui/button.d.ts
index 210359566f8e..297de18cd56a 100644
--- a/packages/devextreme/js/ui/button.d.ts
+++ b/packages/devextreme/js/ui/button.d.ts
@@ -109,12 +109,12 @@ export interface dxButtonOptions extends WidgetOptions<dxButton> {
     icon?: string;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/button:ClickEvent}
      * @action
      * @public
      */
-    onClick?: ((e: ClickEvent) => void);
+    onClick?: ((e: ClickEvent) => void) | undefined;
     /**
      * @docid
      * @default 'contained'
diff --git a/packages/devextreme/js/ui/button_group.d.ts b/packages/devextreme/js/ui/button_group.d.ts
index 5c9833cc14df..d2ca8b3d354b 100644
--- a/packages/devextreme/js/ui/button_group.d.ts
+++ b/packages/devextreme/js/ui/button_group.d.ts
@@ -121,20 +121,20 @@ export interface dxButtonGroupOptions extends WidgetOptions<dxButtonGroup> {
     keyExpr?: string | ((item: any) => any);
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/button_group:ItemClickEvent}
      * @action
      * @public
      */
-    onItemClick?: ((e: ItemClickEvent) => void);
+    onItemClick?: ((e: ItemClickEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/button_group:SelectionChangedEvent}
      * @action
      * @public
      */
-    onSelectionChanged?: ((e: SelectionChangedEvent) => void);
+    onSelectionChanged?: ((e: SelectionChangedEvent) => void) | undefined;
     /**
      * @docid
      * @fires dxButtonGroupOptions.onSelectionChanged
diff --git a/packages/devextreme/js/ui/calendar.d.ts b/packages/devextreme/js/ui/calendar.d.ts
index 92798c901546..9b4f186759c5 100644
--- a/packages/devextreme/js/ui/calendar.d.ts
+++ b/packages/devextreme/js/ui/calendar.d.ts
@@ -125,7 +125,7 @@ export interface dxCalendarOptions extends EditorOptions<dxCalendar> {
      * @type_function_param1 data:DisabledDate
      * @public
      */
-    disabledDates?: Array<Date> | ((data: DisabledDate) => boolean);
+    disabledDates?: Array<Date> | ((data: DisabledDate) => boolean) | null;
     /**
      * @docid
      * @default undefined
diff --git a/packages/devextreme/js/ui/check_box.d.ts b/packages/devextreme/js/ui/check_box.d.ts
index d2cbe7adff3a..878ee0230fdb 100644
--- a/packages/devextreme/js/ui/check_box.d.ts
+++ b/packages/devextreme/js/ui/check_box.d.ts
@@ -104,7 +104,7 @@ export interface dxCheckBoxOptions extends EditorOptions<dxCheckBox> {
      * @default false
      * @public
      */
-    value?: boolean | null | undefined;
+    value?: boolean | null;
 }
 /**
  * @docid
diff --git a/packages/devextreme/js/ui/collection/ui.collection_widget.base.d.ts b/packages/devextreme/js/ui/collection/ui.collection_widget.base.d.ts
index ec12f01a27bc..b760d798a5d6 100644
--- a/packages/devextreme/js/ui/collection/ui.collection_widget.base.d.ts
+++ b/packages/devextreme/js/ui/collection/ui.collection_widget.base.d.ts
@@ -80,7 +80,7 @@ export interface CollectionWidgetOptions<
      * @default null
      * @public
      */
-    keyExpr?: string | ((item: TItem) => TKey);
+    keyExpr?: string | ((item: TItem) => TKey) | null;
     /**
      * @docid
      * @default "No data to display"
@@ -98,7 +98,7 @@ export interface CollectionWidgetOptions<
      * @action
      * @public
      */
-    onItemClick?: ((e: NativeEventInfo<TComponent, MouseEvent | PointerEvent> & ItemInfo<TItem>) => void) | string;
+    onItemClick?: ((e: NativeEventInfo<TComponent, MouseEvent | PointerEvent> & ItemInfo<TItem>) => void) | string | null;
     /**
      * @docid
      * @default null
@@ -109,7 +109,7 @@ export interface CollectionWidgetOptions<
      * @action
      * @public
      */
-    onItemContextMenu?: ((e: NativeEventInfo<TComponent, PointerInteractionEvent> & ItemInfo<TItem>) => void);
+    onItemContextMenu?: ((e: NativeEventInfo<TComponent, PointerInteractionEvent> & ItemInfo<TItem>) => void) | null;
     /**
      * @docid
      * @default null
@@ -120,7 +120,7 @@ export interface CollectionWidgetOptions<
      * @action
      * @public
      */
-    onItemHold?: ((e: NativeEventInfo<TComponent, PointerInteractionEvent> & ItemInfo<TItem>) => void);
+    onItemHold?: ((e: NativeEventInfo<TComponent, PointerInteractionEvent> & ItemInfo<TItem>) => void) | null;
     /**
      * @docid
      * @default null
@@ -130,7 +130,7 @@ export interface CollectionWidgetOptions<
      * @action
      * @public
      */
-    onItemRendered?: ((e: EventInfo<TComponent> & ItemInfo<TItem>) => void);
+    onItemRendered?: ((e: EventInfo<TComponent> & ItemInfo<TItem>) => void) | null;
     /**
      * @docid
      * @default null
@@ -142,7 +142,7 @@ export interface CollectionWidgetOptions<
      * @action
      * @public
      */
-    onSelectionChanging?: ((e: SelectionChangingEventBase<TComponent>) => void);
+    onSelectionChanging?: ((e: SelectionChangingEventBase<TComponent>) => void) | null;
     /**
      * @docid
      * @default null
@@ -153,7 +153,7 @@ export interface CollectionWidgetOptions<
      * @action
      * @public
      */
-    onSelectionChanged?: ((e: EventInfo<TComponent> & SelectionChangeInfo<TItem>) => void);
+    onSelectionChanged?: ((e: EventInfo<TComponent> & SelectionChangeInfo<TItem>) => void) | null;
     /**
      * @docid
      * @default -1
@@ -168,7 +168,7 @@ export interface CollectionWidgetOptions<
      * @ref
      * @public
      */
-    selectedItem?: TItem;
+    selectedItem?: TItem | null;
     /**
      * @docid
      * @fires CollectionWidgetOptions.onSelectionChanged
diff --git a/packages/devextreme/js/ui/color_box.d.ts b/packages/devextreme/js/ui/color_box.d.ts
index 9f63261053ec..de0d627b5642 100644
--- a/packages/devextreme/js/ui/color_box.d.ts
+++ b/packages/devextreme/js/ui/color_box.d.ts
@@ -199,7 +199,7 @@ export interface dxColorBoxOptions extends dxDropDownEditorOptions<dxColorBox> {
      * @public
      * @deprecated dxDropDownEditorOptions.fieldAddons
      */
-    fieldTemplate?: template | ((value: string, fieldElement: DxElement) => string | UserDefinedElement);
+    fieldTemplate?: template | ((value: string, fieldElement: DxElement) => string | UserDefinedElement) | null;
     /**
      * @docid
      * @default 1
diff --git a/packages/devextreme/js/ui/context_menu.d.ts b/packages/devextreme/js/ui/context_menu.d.ts
index 17bb84249583..ed081696a6c0 100644
--- a/packages/devextreme/js/ui/context_menu.d.ts
+++ b/packages/devextreme/js/ui/context_menu.d.ts
@@ -179,44 +179,44 @@ export interface dxContextMenuOptions<
     items?: Array<TItem>;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/context_menu:HiddenEvent}
      * @action
      * @public
      */
-    onHidden?: ((e: HiddenEvent<TItem, TKey>) => void);
+    onHidden?: ((e: HiddenEvent<TItem, TKey>) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/context_menu:HidingEvent}
      * @action
      * @public
      */
-    onHiding?: ((e: HidingEvent<TItem, TKey>) => void);
+    onHiding?: ((e: HidingEvent<TItem, TKey>) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/context_menu:PositioningEvent}
      * @action
      * @public
      */
-    onPositioning?: ((e: PositioningEvent<TItem, TKey>) => void);
+    onPositioning?: ((e: PositioningEvent<TItem, TKey>) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/context_menu:ShowingEvent}
      * @action
      * @public
      */
-    onShowing?: ((e: ShowingEvent<TItem, TKey>) => void);
+    onShowing?: ((e: ShowingEvent<TItem, TKey>) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/context_menu:ShownEvent}
      * @action
      * @public
      */
-    onShown?: ((e: ShownEvent<TItem, TKey>) => void);
+    onShown?: ((e: ShownEvent<TItem, TKey>) => void) | undefined;
     /**
      * @docid
      * @default { my: 'top left', at: 'top left' }
diff --git a/packages/devextreme/js/ui/date_box.d.ts b/packages/devextreme/js/ui/date_box.d.ts
index bf25a009678c..5ce6bd2d987e 100644
--- a/packages/devextreme/js/ui/date_box.d.ts
+++ b/packages/devextreme/js/ui/date_box.d.ts
@@ -212,7 +212,7 @@ export interface dxDateBoxOptions extends DateBoxBaseOptions<dxDateBox> {
      * @type_function_param1_field component:dxDateBox
      * @public
      */
-    disabledDates?: Array<Date> | ((data: DisabledDate) => boolean);
+    disabledDates?: Array<Date> | ((data: DisabledDate) => boolean) | null;
     /**
      * @docid
      * @default {}
@@ -242,7 +242,7 @@ export interface dxDateBoxOptions extends DateBoxBaseOptions<dxDateBox> {
      * @default null
      * @public
      */
-    maxLength?: string | number;
+    maxLength?: string | number | null;
     /**
      * @docid
      * @default ""
@@ -328,7 +328,7 @@ export interface DateBoxBaseOptions<TComponent> extends Omit<
      * @default null
      * @public
      */
-    displayFormat?: Format;
+    displayFormat?: Format | null;
     /**
      * @docid
      * @type Date|number|string|null|undefined
diff --git a/packages/devextreme/js/ui/diagram.d.ts b/packages/devextreme/js/ui/diagram.d.ts
index 15061e8f32e0..efbb5bdeb6f9 100644
--- a/packages/devextreme/js/ui/diagram.d.ts
+++ b/packages/devextreme/js/ui/diagram.d.ts
@@ -251,7 +251,6 @@ export interface dxDiagramOptions extends WidgetOptions<dxDiagram> {
     contextMenu?: {
       /**
        * @docid
-       * @default undefined
        */
       commands?: Array<CustomCommand | Command>;
       /**
@@ -595,7 +594,6 @@ export interface dxDiagramOptions extends WidgetOptions<dxDiagram> {
     };
     /**
      * @docid
-     * @default null
      * @public
      */
     edges?: {
@@ -715,7 +713,6 @@ export interface dxDiagramOptions extends WidgetOptions<dxDiagram> {
     };
     /**
      * @docid
-     * @default null
      * @public
      */
     nodes?: {
@@ -838,44 +835,44 @@ export interface dxDiagramOptions extends WidgetOptions<dxDiagram> {
     hasChanges?: boolean;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/diagram:ItemClickEvent}
      * @action
      * @public
      */
-    onItemClick?: ((e: ItemClickEvent) => void);
+    onItemClick?: ((e: ItemClickEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/diagram:ItemDblClickEvent}
      * @action
      * @public
      */
-    onItemDblClick?: ((e: ItemDblClickEvent) => void);
+    onItemDblClick?: ((e: ItemDblClickEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/diagram:SelectionChangedEvent}
      * @action
      * @public
      */
-    onSelectionChanged?: ((e: SelectionChangedEvent) => void);
+    onSelectionChanged?: ((e: SelectionChangedEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/diagram:RequestEditOperationEvent}
      * @action
      * @public
      */
-    onRequestEditOperation?: ((e: RequestEditOperationEvent) => void);
+    onRequestEditOperation?: ((e: RequestEditOperationEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/diagram:RequestLayoutUpdateEvent}
      * @action
      * @public
      */
-    onRequestLayoutUpdate?: ((e: RequestLayoutUpdateEvent) => void);
+    onRequestLayoutUpdate?: ((e: RequestLayoutUpdateEvent) => void) | undefined;
     /**
      * @docid
      * @default "white"
@@ -929,7 +926,6 @@ export interface dxDiagramOptions extends WidgetOptions<dxDiagram> {
     propertiesPanel?: {
       /**
        * @docid
-       * @default undefined
        */
       tabs?: Array<{
         /**
@@ -999,7 +995,6 @@ export interface dxDiagramOptions extends WidgetOptions<dxDiagram> {
     mainToolbar?: {
       /**
        * @docid
-       * @default undefined
        */
       commands?: Array<CustomCommand | Command>;
       /**
@@ -1016,7 +1011,6 @@ export interface dxDiagramOptions extends WidgetOptions<dxDiagram> {
     historyToolbar?: {
       /**
        * @docid
-       * @default undefined
        */
       commands?: Array<CustomCommand | Command>;
       /**
@@ -1033,7 +1027,6 @@ export interface dxDiagramOptions extends WidgetOptions<dxDiagram> {
     viewToolbar?: {
       /**
        * @docid
-       * @default undefined
        */
       commands?: Array<CustomCommand | Command>;
       /**
@@ -1050,7 +1043,6 @@ export interface dxDiagramOptions extends WidgetOptions<dxDiagram> {
     toolbox?: {
       /**
        * @docid
-       * @default undefined
        */
       groups?: Array<{
         /**
@@ -1115,7 +1107,6 @@ export interface dxDiagramOptions extends WidgetOptions<dxDiagram> {
     zoomLevel?: number | {
       /**
        * @docid
-       * @default undefined
        */
       items?: Array<number>;
       /**
diff --git a/packages/devextreme/js/ui/drawer.d.ts b/packages/devextreme/js/ui/drawer.d.ts
index 767bc62ddb5a..b0e1eddc101c 100644
--- a/packages/devextreme/js/ui/drawer.d.ts
+++ b/packages/devextreme/js/ui/drawer.d.ts
@@ -83,13 +83,13 @@ export interface dxDrawerOptions extends WidgetOptions<dxDrawer> {
      * @default null
      * @public
      */
-    maxSize?: number;
+    maxSize?: number | null;
     /**
      * @docid
      * @default null
      * @public
      */
-    minSize?: number;
+    minSize?: number | null;
     /**
      * @docid
      * @fires dxDrawerOptions.onOptionChanged
diff --git a/packages/devextreme/js/ui/drop_down_box.d.ts b/packages/devextreme/js/ui/drop_down_box.d.ts
index 9a1157e75b12..882fdbb2d6b2 100644
--- a/packages/devextreme/js/ui/drop_down_box.d.ts
+++ b/packages/devextreme/js/ui/drop_down_box.d.ts
@@ -213,7 +213,7 @@ export interface dxDropDownBoxOptions extends DataExpressionMixinOptions<dxDropD
      * @public
      * @deprecated dxDropDownEditorOptions.fieldAddons
      */
-    fieldTemplate?: template | ((value: any, fieldElement: DxElement) => string | UserDefinedElement);
+    fieldTemplate?: template | ((value: any, fieldElement: DxElement) => string | UserDefinedElement) | null;
     /**
      * @docid
      * @public
diff --git a/packages/devextreme/js/ui/drop_down_editor/ui.drop_down_editor.d.ts b/packages/devextreme/js/ui/drop_down_editor/ui.drop_down_editor.d.ts
index 487d93f6f0a9..140f42caa15b 100644
--- a/packages/devextreme/js/ui/drop_down_editor/ui.drop_down_editor.d.ts
+++ b/packages/devextreme/js/ui/drop_down_editor/ui.drop_down_editor.d.ts
@@ -92,7 +92,7 @@ export interface dxDropDownEditorOptions<TComponent> extends Omit<dxTextBoxOptio
      * @default undefined
      * @public
      */
-    buttons?: Array<DropDownPredefinedButton | TextEditorButton>;
+    buttons?: Array<DropDownPredefinedButton | TextEditorButton> | undefined;
     /**
      * @docid
      * @default true
@@ -119,14 +119,14 @@ export interface dxDropDownEditorOptions<TComponent> extends Omit<dxTextBoxOptio
      * @action
      * @public
      */
-    onClosed?: ((e: EventInfo<TComponent>) => void);
+    onClosed?: ((e: EventInfo<TComponent>) => void) | null;
     /**
      * @docid
      * @default null
      * @action
      * @public
      */
-    onOpened?: ((e: EventInfo<TComponent>) => void);
+    onOpened?: ((e: EventInfo<TComponent>) => void) | null;
     /**
      * @docid
      * @default false
@@ -158,7 +158,7 @@ export interface dxDropDownEditorOptions<TComponent> extends Omit<dxTextBoxOptio
      * @default null
      * @public
      */
-    value?: any;
+    value?: any | null;
 }
 /**
  * @docid
diff --git a/packages/devextreme/js/ui/drop_down_editor/ui.drop_down_list.d.ts b/packages/devextreme/js/ui/drop_down_editor/ui.drop_down_list.d.ts
index 1680de9187a1..df34bc4af997 100644
--- a/packages/devextreme/js/ui/drop_down_editor/ui.drop_down_list.d.ts
+++ b/packages/devextreme/js/ui/drop_down_editor/ui.drop_down_list.d.ts
@@ -86,7 +86,6 @@ export interface dxDropDownListOptions<TComponent> extends DataExpressionMixinOp
     noDataText?: string;
     /**
      * @docid
-     * @default null
      * @type_function_param1 e:object
      * @type_function_param1_field itemData:object
      * @type_function_param1_field itemElement:object
@@ -106,7 +105,7 @@ export interface dxDropDownListOptions<TComponent> extends DataExpressionMixinOp
      * @action
      * @public
      */
-    onSelectionChanged?: ((e: EventInfo<TComponent> & SelectionChangedInfo) => void);
+    onSelectionChanged?: ((e: EventInfo<TComponent> & SelectionChangedInfo) => void) | null;
     /**
      * @docid
      * @default null
@@ -118,7 +117,7 @@ export interface dxDropDownListOptions<TComponent> extends DataExpressionMixinOp
      * @action
      * @public
      */
-    onValueChanged?: ((e: NativeEventInfo<TComponent, KeyboardEvent | MouseEvent | PointerEvent | Event> & ValueChangedInfo) => void);
+    onValueChanged?: ((e: NativeEventInfo<TComponent, KeyboardEvent | MouseEvent | PointerEvent | Event> & ValueChangedInfo) => void) | null;
     /**
      * @docid
      * @default false
@@ -131,7 +130,7 @@ export interface dxDropDownListOptions<TComponent> extends DataExpressionMixinOp
      * @default null
      * @public
      */
-    searchExpr?: string | Function | Array<string | Function>;
+    searchExpr?: string | Function | Array<string | Function> | null;
     /**
      * @docid
      * @default "contains"
@@ -151,7 +150,7 @@ export interface dxDropDownListOptions<TComponent> extends DataExpressionMixinOp
      * @ref
      * @public
      */
-    selectedItem?: any;
+    selectedItem?: any | null;
     /**
      * @docid
      * @default false
diff --git a/packages/devextreme/js/ui/editor/editor.d.ts b/packages/devextreme/js/ui/editor/editor.d.ts
index 1fd02a867460..64ad2f85f06f 100644
--- a/packages/devextreme/js/ui/editor/editor.d.ts
+++ b/packages/devextreme/js/ui/editor/editor.d.ts
@@ -53,7 +53,7 @@ export interface EditorOptions<TComponent> extends WidgetOptions<TComponent> {
      * @action
      * @public
      */
-    onValueChanged?: ((e: NativeEventInfo<TComponent, Event> & ValueChangedInfo) => void);
+    onValueChanged?: ((e: NativeEventInfo<TComponent, Event> & ValueChangedInfo) => void) | null;
     /**
      * @docid
      * @default false
@@ -66,13 +66,13 @@ export interface EditorOptions<TComponent> extends WidgetOptions<TComponent> {
      * @default null
      * @public
      */
-    validationError?: any;
+    validationError?: any | null;
     /**
      * @docid
      * @default null
      * @public
      */
-    validationErrors?: Array<any>;
+    validationErrors?: Array<any> | null;
     /**
      * @docid
      * @default "auto"
@@ -97,7 +97,7 @@ export interface EditorOptions<TComponent> extends WidgetOptions<TComponent> {
      * @fires EditorOptions.onValueChanged
      * @public
      */
-    value?: any;
+    value?: any | null;
     /**
      * @docid
      * @default 'outlined'
diff --git a/packages/devextreme/js/ui/editor/ui.data_expression.d.ts b/packages/devextreme/js/ui/editor/ui.data_expression.d.ts
index 93d63bd52366..ca58847b3cc3 100644
--- a/packages/devextreme/js/ui/editor/ui.data_expression.d.ts
+++ b/packages/devextreme/js/ui/editor/ui.data_expression.d.ts
@@ -52,7 +52,7 @@ export interface DataExpressionMixinOptions<T = DataExpressionMixin> {
      * @default null
      * @public
      */
-    value?: any;
+    value?: any | null;
     /**
      * @docid
      * @default "this"
diff --git a/packages/devextreme/js/ui/file_manager.d.ts b/packages/devextreme/js/ui/file_manager.d.ts
index d6f59ffef9ff..8d1a28f1f476 100644
--- a/packages/devextreme/js/ui/file_manager.d.ts
+++ b/packages/devextreme/js/ui/file_manager.d.ts
@@ -456,10 +456,9 @@ export interface dxFileManagerOptions extends WidgetOptions<dxFileManager> {
      * @default null
      * @public
      */
-    fileSystemProvider?: any;
+    fileSystemProvider?: any | null;
     /**
      * @docid
-     * @default null
      * @public
      */
     itemView?: {
@@ -507,44 +506,44 @@ export interface dxFileManagerOptions extends WidgetOptions<dxFileManager> {
     };
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/file_manager:ContextMenuItemClickEvent}
      * @action
      * @public
      */
-    onContextMenuItemClick?: ((e: ContextMenuItemClickEvent) => void);
+    onContextMenuItemClick?: ((e: ContextMenuItemClickEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/file_manager:ContextMenuShowingEvent}
      * @action
      * @public
      */
-    onContextMenuShowing?: ((e: ContextMenuShowingEvent) => void);
+    onContextMenuShowing?: ((e: ContextMenuShowingEvent) => void) | undefined;
     /**
      * @docid
      * @type_function_param1 e:{ui/file_manager:CurrentDirectoryChangedEvent}
-     * @default null
+     * @default undefined
      * @action
      * @public
      */
-    onCurrentDirectoryChanged?: ((e: CurrentDirectoryChangedEvent) => void);
+    onCurrentDirectoryChanged?: ((e: CurrentDirectoryChangedEvent) => void) | undefined;
     /**
      * @docid
      * @type_function_param1 e:{ui/file_manager:SelectedFileOpenedEvent}
-     * @default null
+     * @default undefined
      * @action
      * @public
      */
-    onSelectedFileOpened?: ((e: SelectedFileOpenedEvent) => void);
+    onSelectedFileOpened?: ((e: SelectedFileOpenedEvent) => void) | undefined;
     /**
      * @docid
      * @type_function_param1 e:{ui/file_manager:SelectionChangedEvent}
-     * @default null
+     * @default undefined
      * @action
      * @public
      */
-    onSelectionChanged?: ((e: SelectionChangedEvent) => void);
+    onSelectionChanged?: ((e: SelectionChangedEvent) => void) | undefined;
     /**
      * @docid
      * @type_function_param1 e:{ui/file_manager:ToolbarItemClickEvent}
@@ -555,123 +554,123 @@ export interface dxFileManagerOptions extends WidgetOptions<dxFileManager> {
     /**
      * @docid
      * @type_function_param1 e:{ui/file_manager:FocusedItemChangedEvent}
-     * @default null
+     * @default undefined
      * @action
      * @public
      */
-    onFocusedItemChanged?: ((e: FocusedItemChangedEvent) => void);
+    onFocusedItemChanged?: ((e: FocusedItemChangedEvent) => void) | undefined;
     /**
      * @docid
      * @type_function_param1 e:{ui/file_manager:ErrorOccurredEvent}
-     * @default null
+     * @default undefined
      * @action
      * @public
      */
-    onErrorOccurred?: ((e: ErrorOccurredEvent) => void);
+    onErrorOccurred?: ((e: ErrorOccurredEvent) => void) | undefined;
     /**
      * @docid
      * @type_function_param1 e:{ui/file_manager:DirectoryCreatingEvent}
-     * @default null
+     * @default undefined
      * @action
      * @public
      */
-    onDirectoryCreating?: ((e: DirectoryCreatingEvent) => void);
+    onDirectoryCreating?: ((e: DirectoryCreatingEvent) => void) | undefined;
     /**
      * @docid
      * @type_function_param1 e:{ui/file_manager:DirectoryCreatedEvent}
-     * @default null
+     * @default undefined
      * @action
      * @public
      */
-    onDirectoryCreated?: ((e: DirectoryCreatedEvent) => void);
+    onDirectoryCreated?: ((e: DirectoryCreatedEvent) => void) | undefined;
     /**
      * @docid
      * @type_function_param1 e:{ui/file_manager:ItemRenamingEvent}
-     * @default null
+     * @default undefined
      * @action
      * @public
      */
-    onItemRenaming?: ((e: ItemRenamingEvent) => void);
+    onItemRenaming?: ((e: ItemRenamingEvent) => void) | undefined;
     /**
      * @docid
      * @type_function_param1 e:{ui/file_manager:ItemRenamedEvent}
-     * @default null
+     * @default undefined
      * @action
      * @public
      */
-    onItemRenamed?: ((e: ItemRenamedEvent) => void);
+    onItemRenamed?: ((e: ItemRenamedEvent) => void) | undefined;
     /**
      * @docid
      * @type_function_param1 e:{ui/file_manager:ItemMovingEvent}
-     * @default null
+     * @default undefined
      * @action
      * @public
      */
-    onItemMoving?: ((e: ItemMovingEvent) => void);
+    onItemMoving?: ((e: ItemMovingEvent) => void) | undefined;
     /**
      * @docid
      * @type_function_param1 e:{ui/file_manager:ItemMovedEvent}
-     * @default null
+     * @default undefined
      * @action
      * @public
      */
-    onItemMoved?: ((e: ItemMovedEvent) => void);
+    onItemMoved?: ((e: ItemMovedEvent) => void) | undefined;
     /**
      * @docid
      * @type_function_param1 e:{ui/file_manager:ItemCopyingEvent}
-     * @default null
+     * @default undefined
      * @action
      * @public
      */
-    onItemCopying?: ((e: ItemCopyingEvent) => void);
+    onItemCopying?: ((e: ItemCopyingEvent) => void) | undefined;
     /**
      * @docid
      * @type_function_param1 e:{ui/file_manager:ItemCopiedEvent}
-     * @default null
+     * @default undefined
      * @action
      * @public
      */
-    onItemCopied?: ((e: ItemCopiedEvent) => void);
+    onItemCopied?: ((e: ItemCopiedEvent) => void) | undefined;
     /**
      * @docid
      * @type_function_param1 e:{ui/file_manager:ItemDeletingEvent}
-     * @default null
+     * @default undefined
      * @action
      * @public
      */
-    onItemDeleting?: ((e: ItemDeletingEvent) => void);
+    onItemDeleting?: ((e: ItemDeletingEvent) => void) | undefined;
     /**
      * @docid
      * @type_function_param1 e:{ui/file_manager:ItemDeletedEvent}
-     * @default null
+     * @default undefined
      * @action
      * @public
      */
-    onItemDeleted?: ((e: ItemDeletedEvent) => void);
+    onItemDeleted?: ((e: ItemDeletedEvent) => void) | undefined;
     /**
      * @docid
      * @type_function_param1 e:{ui/file_manager:FileUploadingEvent}
-     * @default null
+     * @default undefined
      * @action
      * @public
      */
-    onFileUploading?: ((e: FileUploadingEvent) => void);
+    onFileUploading?: ((e: FileUploadingEvent) => void) | undefined;
     /**
      * @docid
      * @type_function_param1 e:{ui/file_manager:FileUploadedEvent}
-     * @default null
+     * @default undefined
      * @action
      * @public
      */
-    onFileUploaded?: ((e: FileUploadedEvent) => void);
+    onFileUploaded?: ((e: FileUploadedEvent) => void) | undefined;
     /**
      * @docid
      * @type_function_param1 e:{ui/file_manager:ItemDownloadingEvent}
-     * @default null
+     * @default undefined
      * @action
      * @public
      */
-    onItemDownloading?: ((e: ItemDownloadingEvent) => void);
+    onItemDownloading?: ((e: ItemDownloadingEvent) => void) | undefined;
     /**
      * @docid
      * @public
@@ -733,10 +732,10 @@ export interface dxFileManagerOptions extends WidgetOptions<dxFileManager> {
     selectedItemKeys?: Array<string>;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @public
      */
-    focusedItemKey?: string;
+    focusedItemKey?: string | undefined;
     /**
      * @docid
      * @public
diff --git a/packages/devextreme/js/ui/file_uploader.d.ts b/packages/devextreme/js/ui/file_uploader.d.ts
index 72ab0bbbbcf7..db0c7a6e6b38 100644
--- a/packages/devextreme/js/ui/file_uploader.d.ts
+++ b/packages/devextreme/js/ui/file_uploader.d.ts
@@ -302,84 +302,84 @@ export interface dxFileUploaderOptions extends EditorOptions<dxFileUploader> {
     name?: string;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/file_uploader:BeforeSendEvent}
      * @action
      * @public
      */
-    onBeforeSend?: ((e: BeforeSendEvent) => void);
+    onBeforeSend?: ((e: BeforeSendEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/file_uploader:DropZoneEnterEvent}
      * @action
      * @public
      */
-    onDropZoneEnter?: ((e: DropZoneEnterEvent) => void);
+    onDropZoneEnter?: ((e: DropZoneEnterEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/file_uploader:DropZoneLeaveEvent}
      * @action
      * @public
      */
-    onDropZoneLeave?: ((e: DropZoneLeaveEvent) => void);
+    onDropZoneLeave?: ((e: DropZoneLeaveEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/file_uploader:FilesUploadedEvent}
      * @action
      * @public
      */
-    onFilesUploaded?: ((e: FilesUploadedEvent) => void);
+    onFilesUploaded?: ((e: FilesUploadedEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/file_uploader:ProgressEvent}
      * @action
      * @public
      */
-    onProgress?: ((e: ProgressEvent) => void);
+    onProgress?: ((e: ProgressEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/file_uploader:UploadAbortedEvent}
      * @action
      * @public
      */
-    onUploadAborted?: ((e: UploadAbortedEvent) => void);
+    onUploadAborted?: ((e: UploadAbortedEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/file_uploader:UploadErrorEvent}
      * @action
      * @public
      */
-    onUploadError?: ((e: UploadErrorEvent) => void);
+    onUploadError?: ((e: UploadErrorEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/file_uploader:UploadStartedEvent}
      * @action
      * @public
      */
-    onUploadStarted?: ((e: UploadStartedEvent) => void);
+    onUploadStarted?: ((e: UploadStartedEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/file_uploader:UploadedEvent}
      * @action
      * @public
      */
-    onUploaded?: ((e: UploadedEvent) => void);
+    onUploaded?: ((e: UploadedEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/file_uploader:ValueChangedEvent}
      * @action
      * @public
      */
-    onValueChanged?: ((e: ValueChangedEvent) => void);
+    onValueChanged?: ((e: ValueChangedEvent) => void) | undefined;
     /**
      * @docid
      * @default 0
diff --git a/packages/devextreme/js/ui/form.d.ts b/packages/devextreme/js/ui/form.d.ts
index e7b46c29720a..dc798d919d77 100644
--- a/packages/devextreme/js/ui/form.d.ts
+++ b/packages/devextreme/js/ui/form.d.ts
@@ -268,36 +268,36 @@ export interface dxFormOptions extends WidgetOptions<dxForm> {
     minColWidth?: number;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/form:EditorEnterKeyEvent}
      * @action
      * @public
      */
-    onEditorEnterKey?: ((e: EditorEnterKeyEvent) => void);
+    onEditorEnterKey?: ((e: EditorEnterKeyEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/form:FieldDataChangedEvent}
      * @action
      * @public
      */
-    onFieldDataChanged?: ((e: FieldDataChangedEvent) => void);
+    onFieldDataChanged?: ((e: FieldDataChangedEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/form:SmartPastingEvent}
      * @action
      * @public
      */
-    onSmartPasting?: ((e: SmartPastingEvent) => void);
+    onSmartPasting?: ((e: SmartPastingEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/form:SmartPastedEvent}
      * @action
      * @public
      */
-    onSmartPasted?: ((e: SmartPastedEvent) => void);
+    onSmartPasted?: ((e: SmartPastedEvent) => void) | undefined;
     /**
      * @docid
      * @default "optional"
@@ -324,7 +324,6 @@ export interface dxFormOptions extends WidgetOptions<dxForm> {
     requiredMessage?: string;
     /**
      * @docid
-     * @default null
      * @public
      */
     screenByWidth?: Function;
@@ -762,7 +761,6 @@ export interface dxFormSimpleItem {
     itemType?: FormItemType;
     /**
      * @docid
-     * @default undefined
      * @public
      */
     label?: {
@@ -814,7 +812,6 @@ export interface dxFormSimpleItem {
     template?: template | ((data: SimpleItemTemplateData, itemElement: DxElement) => string | UserDefinedElement);
     /**
      * @docid
-     * @default undefined
      * @public
      */
     validationRules?: Array<RequiredRule | NumericRule | RangeRule | StringLengthRule | CustomRule | CompareRule | PatternRule | EmailRule | AsyncRule>;
@@ -875,7 +872,6 @@ export interface dxFormTabbedItem {
     tabPanelOptions?: dxTabPanelOptions | undefined;
     /**
      * @docid
-     * @default undefined
      * @public
      */
     tabs?: Array<{
diff --git a/packages/devextreme/js/ui/gantt.d.ts b/packages/devextreme/js/ui/gantt.d.ts
index 45d5faed6310..e593d25571b5 100644
--- a/packages/devextreme/js/ui/gantt.d.ts
+++ b/packages/devextreme/js/ui/gantt.d.ts
@@ -519,7 +519,6 @@ export interface dxGanttOptions extends WidgetOptions<dxGantt> {
     columns?: Array<Column | string> | undefined;
     /**
      * @docid
-     * @default null
      * @public
      */
     dependencies?: {
@@ -644,224 +643,223 @@ export interface dxGanttOptions extends WidgetOptions<dxGantt> {
      headerFilter?: dxGanttHeaderFilter;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/gantt:SelectionChangedEvent}
      * @action
      * @public
      */
-    onSelectionChanged?: ((e: SelectionChangedEvent) => void);
+    onSelectionChanged?: ((e: SelectionChangedEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/gantt:CustomCommandEvent}
      * @action
      * @public
      */
-    onCustomCommand?: ((e: CustomCommandEvent) => void);
+    onCustomCommand?: ((e: CustomCommandEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/gantt:ContextMenuPreparingEvent}
      * @action
      * @public
      */
-    onContextMenuPreparing?: ((e: ContextMenuPreparingEvent) => void);
+    onContextMenuPreparing?: ((e: ContextMenuPreparingEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/gantt:TaskInsertingEvent}
      * @action
      * @public
      */
-    onTaskInserting?: ((e: TaskInsertingEvent) => void);
+    onTaskInserting?: ((e: TaskInsertingEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/gantt:TaskInsertedEvent}
      * @action
      * @public
      */
-    onTaskInserted?: ((e: TaskInsertedEvent) => void);
+    onTaskInserted?: ((e: TaskInsertedEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/gantt:TaskDeletingEvent}
      * @action
      * @public
      */
-    onTaskDeleting?: ((e: TaskDeletingEvent) => void);
+    onTaskDeleting?: ((e: TaskDeletingEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/gantt:TaskDeletedEvent}
      * @action
      * @public
      */
-    onTaskDeleted?: ((e: TaskDeletedEvent) => void);
+    onTaskDeleted?: ((e: TaskDeletedEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/gantt:TaskUpdatingEvent}
      * @action
      * @public
      */
-    onTaskUpdating?: ((e: TaskUpdatingEvent) => void);
+    onTaskUpdating?: ((e: TaskUpdatingEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/gantt:TaskUpdatedEvent}
      * @action
      * @public
      */
-    onTaskUpdated?: ((e: TaskUpdatedEvent) => void);
+    onTaskUpdated?: ((e: TaskUpdatedEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/gantt:TaskMovingEvent}
      * @action
      * @public
      */
-    onTaskMoving?: ((e: TaskMovingEvent) => void);
+    onTaskMoving?: ((e: TaskMovingEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/gantt:TaskEditDialogShowingEvent}
      * @action
      * @public
      */
-    onTaskEditDialogShowing?: ((e: TaskEditDialogShowingEvent) => void);
+    onTaskEditDialogShowing?: ((e: TaskEditDialogShowingEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/gantt:ResourceManagerDialogShowingEvent}
      * @action
      * @public
      */
-    onResourceManagerDialogShowing?: ((e: ResourceManagerDialogShowingEvent) => void);
+    onResourceManagerDialogShowing?: ((e: ResourceManagerDialogShowingEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/gantt:DependencyInsertingEvent}
      * @action
      * @public
      */
-    onDependencyInserting?: ((e: DependencyInsertingEvent) => void);
+    onDependencyInserting?: ((e: DependencyInsertingEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/gantt:DependencyInsertedEvent}
      * @action
      * @public
      */
-    onDependencyInserted?: ((e: DependencyInsertedEvent) => void);
+    onDependencyInserted?: ((e: DependencyInsertedEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/gantt:DependencyDeletingEvent}
      * @action
      * @public
      */
-    onDependencyDeleting?: ((e: DependencyDeletingEvent) => void);
+    onDependencyDeleting?: ((e: DependencyDeletingEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/gantt:DependencyDeletedEvent}
      * @action
      * @public
      */
-    onDependencyDeleted?: ((e: DependencyDeletedEvent) => void);
+    onDependencyDeleted?: ((e: DependencyDeletedEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/gantt:ResourceInsertingEvent}
      * @action
      * @public
      */
-    onResourceInserting?: ((e: ResourceInsertingEvent) => void);
+    onResourceInserting?: ((e: ResourceInsertingEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/gantt:ResourceInsertedEvent}
      * @action
      * @public
      */
-    onResourceInserted?: ((e: ResourceInsertedEvent) => void);
+    onResourceInserted?: ((e: ResourceInsertedEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/gantt:ResourceDeletingEvent}
      * @action
      * @public
      */
-    onResourceDeleting?: ((e: ResourceDeletingEvent) => void);
+    onResourceDeleting?: ((e: ResourceDeletingEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/gantt:ResourceDeletedEvent}
      * @action
      * @public
      */
-    onResourceDeleted?: ((e: ResourceDeletedEvent) => void);
+    onResourceDeleted?: ((e: ResourceDeletedEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/gantt:ResourceAssigningEvent}
      * @action
      * @public
      */
-    onResourceAssigning?: ((e: ResourceAssigningEvent) => void);
+    onResourceAssigning?: ((e: ResourceAssigningEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/gantt:ResourceAssignedEvent}
      * @action
      * @public
      */
-    onResourceAssigned?: ((e: ResourceAssignedEvent) => void);
+    onResourceAssigned?: ((e: ResourceAssignedEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/gantt:ResourceUnassigningEvent}
      * @action
      * @public
      */
-    onResourceUnassigning?: ((e: ResourceUnassigningEvent) => void);
+    onResourceUnassigning?: ((e: ResourceUnassigningEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/gantt:ResourceUnassignedEvent}
      * @action
      * @public
      */
-    onResourceUnassigned?: ((e: ResourceUnassignedEvent) => void);
+    onResourceUnassigned?: ((e: ResourceUnassignedEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/gantt:TaskClickEvent}
      * @action
      * @public
      */
-    onTaskClick?: ((e: TaskClickEvent) => void);
+    onTaskClick?: ((e: TaskClickEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/gantt:TaskDblClickEvent}
      * @action
      * @public
      */
-    onTaskDblClick?: ((e: TaskDblClickEvent) => void);
+    onTaskDblClick?: ((e: TaskDblClickEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/gantt:ScaleCellPreparedEvent}
      * @action
      * @public
      */
-    onScaleCellPrepared?: ((e: ScaleCellPreparedEvent) => void);
+    onScaleCellPrepared?: ((e: ScaleCellPreparedEvent) => void) | undefined;
 
     /**
      * @docid
-     * @default null
      * @public
      */
     resourceAssignments?: {
@@ -889,7 +887,6 @@ export interface dxGanttOptions extends WidgetOptions<dxGantt> {
     };
     /**
      * @docid
-     * @default null
      * @public
      */
     resources?: {
@@ -981,7 +978,6 @@ export interface dxGanttOptions extends WidgetOptions<dxGantt> {
     firstDayOfWeek?: DayOfWeek | undefined;
     /**
      * @docid
-     * @default null
      * @public
      */
     tasks?: {
@@ -1029,7 +1025,6 @@ export interface dxGanttOptions extends WidgetOptions<dxGantt> {
     };
     /**
      * @docid
-     * @default null
      * @public
      */
     toolbar?: dxGanttToolbar;
@@ -1040,7 +1035,6 @@ export interface dxGanttOptions extends WidgetOptions<dxGantt> {
     contextMenu?: dxGanttContextMenu;
     /**
      * @docid
-     * @default undefined
      * @public
      */
     stripLines?: Array<dxGanttStripLine>;
@@ -1085,16 +1079,16 @@ export interface dxGanttOptions extends WidgetOptions<dxGantt> {
     rootValue?: any;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @public
      */
-    startDateRange?: Date;
+    startDateRange?: Date | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @public
      */
-    endDateRange?: Date;
+    endDateRange?: Date | undefined;
 }
 /**
  * @docid
diff --git a/packages/devextreme/js/ui/html_editor.d.ts b/packages/devextreme/js/ui/html_editor.d.ts
index 84c061d95b37..60525dc159ad 100644
--- a/packages/devextreme/js/ui/html_editor.d.ts
+++ b/packages/devextreme/js/ui/html_editor.d.ts
@@ -311,25 +311,25 @@ export interface dxHtmlEditorOptions extends EditorOptions<dxHtmlEditor> {
      * @default null
      * @public
      */
-    mediaResizing?: dxHtmlEditorMediaResizing;
+    mediaResizing?: dxHtmlEditorMediaResizing | null;
     /**
      * @docid
      * @default null
      * @public
      */
-    tableResizing?: dxHtmlEditorTableResizing;
+    tableResizing?: dxHtmlEditorTableResizing | null;
     /**
      * @docid
      * @default null
      * @public
      */
-    mentions?: Array<dxHtmlEditorMention>;
+    mentions?: Array<dxHtmlEditorMention> | null;
     /**
      * @docid
      * @default null
      * @public
      */
-    tableContextMenu?: dxHtmlEditorTableContextMenu;
+    tableContextMenu?: dxHtmlEditorTableContextMenu | null;
     /**
      * @docid
      * @default { tabs: ["url"], fileUploadMode: 'base64', uploadUrl: undefined, uploadDirectory: undefined }
@@ -344,20 +344,20 @@ export interface dxHtmlEditorOptions extends EditorOptions<dxHtmlEditor> {
     name?: string;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/html_editor:FocusInEvent}
      * @action
      * @public
      */
-    onFocusIn?: ((e: FocusInEvent) => void);
+    onFocusIn?: ((e: FocusInEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/html_editor:FocusOutEvent}
      * @action
      * @public
      */
-    onFocusOut?: ((e: FocusOutEvent) => void);
+    onFocusOut?: ((e: FocusOutEvent) => void) | undefined;
     /**
      * @docid
      * @default ""
@@ -369,13 +369,13 @@ export interface dxHtmlEditorOptions extends EditorOptions<dxHtmlEditor> {
      * @default null
      * @public
      */
-    toolbar?: dxHtmlEditorToolbar;
+    toolbar?: dxHtmlEditorToolbar | null;
     /**
      * @docid
      * @default null
      * @public
      */
-    variables?: dxHtmlEditorVariables;
+    variables?: dxHtmlEditorVariables | null;
     /**
      * @docid
      * @default 'outlined'
@@ -638,7 +638,6 @@ export interface dxHtmlEditorImageUpload {
     tabs?: Array<ImageUploadTab | HtmlEditorImageUploadTab>;
     /**
     * @docid
-    * @default null
     * @type dxFileUploaderOptions
     * @public
     */
@@ -764,7 +763,6 @@ export interface dxHtmlEditorMention {
     searchTimeout?: number;
     /**
      * @docid
-     * @default null
      * @type_function_param1 mentionData:object
      * @type_function_return string|Element|jQuery
      * @public
diff --git a/packages/devextreme/js/ui/list.d.ts b/packages/devextreme/js/ui/list.d.ts
index e4b9210959a0..59ce5f2cf804 100644
--- a/packages/devextreme/js/ui/list.d.ts
+++ b/packages/devextreme/js/ui/list.d.ts
@@ -401,12 +401,12 @@ export interface dxListOptions<
     nextButtonText?: string;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/list:GroupRenderedEvent}
      * @action
      * @public
      */
-    onGroupRendered?: ((e: GroupRenderedEvent<TItem, TKey>) => void);
+    onGroupRendered?: ((e: GroupRenderedEvent<TItem, TKey>) => void) | undefined;
     /**
      * @docid
      * @default null
@@ -415,90 +415,90 @@ export interface dxListOptions<
      * @action
      * @public
      */
-    onItemClick?: ((e: ItemClickEvent<TItem, TKey>) => void) | string;
+    onItemClick?: ((e: ItemClickEvent<TItem, TKey>) => void) | string | null;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/list:ItemContextMenuEvent}
      * @action
      * @public
      */
-    onItemContextMenu?: ((e: ItemContextMenuEvent<TItem, TKey>) => void);
+    onItemContextMenu?: ((e: ItemContextMenuEvent<TItem, TKey>) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/list:ItemDeletedEvent}
      * @action
      * @hidden false
      * @public
      */
-    onItemDeleted?: ((e: ItemDeletedEvent<TItem, TKey>) => void);
+    onItemDeleted?: ((e: ItemDeletedEvent<TItem, TKey>) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/list:ItemDeletingEvent}
      * @action
      * @hidden false
      * @public
      */
-    onItemDeleting?: ((e: ItemDeletingEvent<TItem, TKey>) => void);
+    onItemDeleting?: ((e: ItemDeletingEvent<TItem, TKey>) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/list:ItemHoldEvent}
      * @action
      * @public
      */
-    onItemHold?: ((e: ItemHoldEvent<TItem, TKey>) => void);
+    onItemHold?: ((e: ItemHoldEvent<TItem, TKey>) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/list:ItemReorderedEvent}
      * @action
      * @hidden false
      * @public
      */
-    onItemReordered?: ((e: ItemReorderedEvent<TItem, TKey>) => void);
+    onItemReordered?: ((e: ItemReorderedEvent<TItem, TKey>) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/list:ItemSwipeEvent}
      * @action
      * @public
      */
-    onItemSwipe?: ((e: ItemSwipeEvent<TItem, TKey>) => void);
+    onItemSwipe?: ((e: ItemSwipeEvent<TItem, TKey>) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/list:PageLoadingEvent}
      * @action
      * @public
      */
-    onPageLoading?: ((e: PageLoadingEvent<TItem, TKey>) => void);
+    onPageLoading?: ((e: PageLoadingEvent<TItem, TKey>) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/list:PullRefreshEvent}
      * @action
      * @public
      */
-    onPullRefresh?: ((e: PullRefreshEvent<TItem, TKey>) => void);
+    onPullRefresh?: ((e: PullRefreshEvent<TItem, TKey>) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/list:ScrollEvent}
      * @action
      * @public
      */
-    onScroll?: ((e: ScrollEvent<TItem, TKey>) => void);
+    onScroll?: ((e: ScrollEvent<TItem, TKey>) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/list:SelectAllValueChangedEvent}
      * @action
      * @public
      */
-    onSelectAllValueChanged?: ((e: SelectAllValueChangedEvent<TItem, TKey>) => void);
+    onSelectAllValueChanged?: ((e: SelectAllValueChangedEvent<TItem, TKey>) => void) | undefined;
     /**
      * @docid
      * @default "scrollBottom"
diff --git a/packages/devextreme/js/ui/load_panel.d.ts b/packages/devextreme/js/ui/load_panel.d.ts
index 56cc55647fef..a289eae5d415 100644
--- a/packages/devextreme/js/ui/load_panel.d.ts
+++ b/packages/devextreme/js/ui/load_panel.d.ts
@@ -232,13 +232,11 @@ export interface dxLoadPanelOptions extends dxOverlayOptions<dxLoadPanel> {
 export interface dxLoadPanelAnimation extends dxOverlayAnimation {
     /**
      * @docid dxLoadPanelOptions.animation.hide
-     * @default null
      * @public
      */
     hide?: AnimationConfig;
     /**
      * @docid dxLoadPanelOptions.animation.show
-     * @default null
      * @public
      */
     show?: AnimationConfig;
diff --git a/packages/devextreme/js/ui/lookup.d.ts b/packages/devextreme/js/ui/lookup.d.ts
index 5bd553115a91..9ed5daabce80 100644
--- a/packages/devextreme/js/ui/lookup.d.ts
+++ b/packages/devextreme/js/ui/lookup.d.ts
@@ -185,7 +185,7 @@ export interface dxLookupOptions extends dxDropDownListOptions<dxLookup> {
      * @type_function_return string|Element|jQuery
      * @public
      */
-    fieldTemplate?: template | ((selectedItem: any, fieldElement: DxElement) => string | UserDefinedElement);
+    fieldTemplate?: template | ((selectedItem: any, fieldElement: DxElement) => string | UserDefinedElement) | null;
     /**
      * @docid
      * @default false
@@ -215,36 +215,36 @@ export interface dxLookupOptions extends dxDropDownListOptions<dxLookup> {
     nextButtonText?: string;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/lookup:PageLoadingEvent}
      * @action
      * @public
      */
-    onPageLoading?: ((e: PageLoadingEvent) => void);
+    onPageLoading?: ((e: PageLoadingEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/lookup:PullRefreshEvent}
      * @action
      * @public
      */
-    onPullRefresh?: ((e: PullRefreshEvent) => void);
+    onPullRefresh?: ((e: PullRefreshEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/lookup:ScrollEvent}
      * @action
      * @public
      */
-    onScroll?: ((e: ScrollEvent) => void);
+    onScroll?: ((e: ScrollEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/lookup:ValueChangedEvent}
      * @action
      * @public
      */
-    onValueChanged?: ((e: ValueChangedEvent) => void);
+    onValueChanged?: ((e: ValueChangedEvent) => void) | undefined;
     /**
      * @docid
      * @default "scrollBottom"
diff --git a/packages/devextreme/js/ui/map.d.ts b/packages/devextreme/js/ui/map.d.ts
index 547e62a96f0f..3114984ba144 100644
--- a/packages/devextreme/js/ui/map.d.ts
+++ b/packages/devextreme/js/ui/map.d.ts
@@ -270,47 +270,47 @@ export interface dxMapOptions extends WidgetOptions<dxMap> {
      * @action
      * @public
      */
-    onClick?: ((e: ClickEvent) => void) | string;
+    onClick?: ((e: ClickEvent) => void) | string | null;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/map:MarkerAddedEvent}
      * @action
      * @public
      */
-    onMarkerAdded?: ((e: MarkerAddedEvent) => void);
+    onMarkerAdded?: ((e: MarkerAddedEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/map:MarkerRemovedEvent}
      * @action
      * @public
      */
-    onMarkerRemoved?: ((e: MarkerRemovedEvent) => void);
+    onMarkerRemoved?: ((e: MarkerRemovedEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/map:ReadyEvent}
      * @action
      * @public
      */
-    onReady?: ((e: ReadyEvent) => void);
+    onReady?: ((e: ReadyEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/map:RouteAddedEvent}
      * @action
      * @public
      */
-    onRouteAdded?: ((e: RouteAddedEvent) => void);
+    onRouteAdded?: ((e: RouteAddedEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/map:RouteRemovedEvent}
      * @action
      * @public
      */
-    onRouteRemoved?: ((e: RouteRemovedEvent) => void);
+    onRouteRemoved?: ((e: RouteRemovedEvent) => void) | undefined;
     /**
      * @docid
      * @default "google"
diff --git a/packages/devextreme/js/ui/menu.d.ts b/packages/devextreme/js/ui/menu.d.ts
index 39cfe067f19d..694a8f3994ac 100644
--- a/packages/devextreme/js/ui/menu.d.ts
+++ b/packages/devextreme/js/ui/menu.d.ts
@@ -210,36 +210,36 @@ export interface dxMenuOptions<
     items?: Array<TItem>;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/menu:SubmenuHiddenEvent}
      * @action
      * @public
      */
-    onSubmenuHidden?: ((e: SubmenuHiddenEvent<TItem, TKey>) => void);
+    onSubmenuHidden?: ((e: SubmenuHiddenEvent<TItem, TKey>) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/menu:SubmenuHidingEvent}
      * @action
      * @public
      */
-    onSubmenuHiding?: ((e: SubmenuHidingEvent<TItem, TKey>) => void);
+    onSubmenuHiding?: ((e: SubmenuHidingEvent<TItem, TKey>) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/menu:SubmenuShowingEvent}
      * @action
      * @public
      */
-    onSubmenuShowing?: ((e: SubmenuShowingEvent<TItem, TKey>) => void);
+    onSubmenuShowing?: ((e: SubmenuShowingEvent<TItem, TKey>) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/menu:SubmenuShownEvent}
      * @action
      * @public
      */
-    onSubmenuShown?: ((e: SubmenuShownEvent<TItem, TKey>) => void);
+    onSubmenuShown?: ((e: SubmenuShownEvent<TItem, TKey>) => void) | undefined;
     /**
      * @docid
      * @default "horizontal"
diff --git a/packages/devextreme/js/ui/number_box.d.ts b/packages/devextreme/js/ui/number_box.d.ts
index 529ceeb778cc..250f28aa45f0 100644
--- a/packages/devextreme/js/ui/number_box.d.ts
+++ b/packages/devextreme/js/ui/number_box.d.ts
@@ -161,7 +161,7 @@ export interface dxNumberBoxOptions extends dxTextEditorOptions<dxNumberBox> {
      * @default undefined
      * @public
      */
-    buttons?: Array<NumberBoxPredefinedButton | TextEditorButton>;
+    buttons?: Array<NumberBoxPredefinedButton | TextEditorButton> | undefined;
     /**
      * @docid
      * @default ""
diff --git a/packages/devextreme/js/ui/popup.d.ts b/packages/devextreme/js/ui/popup.d.ts
index 9dca815f9ae0..62964378bc51 100644
--- a/packages/devextreme/js/ui/popup.d.ts
+++ b/packages/devextreme/js/ui/popup.d.ts
@@ -146,43 +146,43 @@ export interface dxPopupOptions<TComponent> extends dxOverlayOptions<TComponent>
     height?: number | string;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:object
      * @type_function_param1_field component:this
      * @type_function_param1_field event:event
      * @action
      * @public
      */
-    onResize?: ((e: ResizeEvent) => void);
+    onResize?: ((e: ResizeEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:object
      * @type_function_param1_field component:this
      * @type_function_param1_field event:event
      * @action
      * @public
      */
-    onResizeEnd?: ((e: ResizeEndEvent) => void);
+    onResizeEnd?: ((e: ResizeEndEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:object
      * @type_function_param1_field component:this
      * @type_function_param1_field event:event
      * @action
      * @public
      */
-    onResizeStart?: ((e: ResizeStartEvent) => void);
+    onResizeStart?: ((e: ResizeStartEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:object
      * @type_function_param1_field component:this
      * @action
      * @public
      */
-    onTitleRendered?: ((e: EventInfo<TComponent> & TitleRenderedInfo) => void);
+    onTitleRendered?: ((e: EventInfo<TComponent> & TitleRenderedInfo) => void) | undefined;
     /**
      * @docid
      * @public
diff --git a/packages/devextreme/js/ui/progress_bar.d.ts b/packages/devextreme/js/ui/progress_bar.d.ts
index e217db48809b..b5c0d526afcf 100644
--- a/packages/devextreme/js/ui/progress_bar.d.ts
+++ b/packages/devextreme/js/ui/progress_bar.d.ts
@@ -69,12 +69,12 @@ export type ValueChangedEvent = NativeEventInfo<dxProgressBar> & ValueChangedInf
 export interface dxProgressBarOptions extends dxTrackBarOptions<dxProgressBar> {
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/progress_bar:CompleteEvent}
      * @action
      * @public
      */
-    onComplete?: ((e: CompleteEvent) => void);
+    onComplete?: ((e: CompleteEvent) => void) | undefined;
     /**
      * @docid
      * @default true
diff --git a/packages/devextreme/js/ui/range_slider.d.ts b/packages/devextreme/js/ui/range_slider.d.ts
index 87524ea0ee76..4af528982147 100644
--- a/packages/devextreme/js/ui/range_slider.d.ts
+++ b/packages/devextreme/js/ui/range_slider.d.ts
@@ -85,10 +85,10 @@ export interface dxRangeSliderOptions extends dxSliderBaseOptions<dxRangeSlider>
      * @docid
      * @type_function_param1 e:{ui/range_slider:ValueChangedEvent}
      * @action
-     * @default null
+     * @default undefined
      * @public
      */
-    onValueChanged?: ((e: ValueChangedEvent) => void);
+    onValueChanged?: ((e: ValueChangedEvent) => void) | undefined;
     /**
      * @docid
      * @default 40
diff --git a/packages/devextreme/js/ui/resizable.d.ts b/packages/devextreme/js/ui/resizable.d.ts
index bbe6ced00e57..cf28a0b7f1e8 100644
--- a/packages/devextreme/js/ui/resizable.d.ts
+++ b/packages/devextreme/js/ui/resizable.d.ts
@@ -128,28 +128,28 @@ export interface dxResizableOptions extends DOMComponentOptions<dxResizable> {
     minWidth?: number;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/resizable:ResizeEvent}
      * @action
      * @public
      */
-    onResize?: ((e: ResizeEvent) => void);
+    onResize?: ((e: ResizeEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/resizable:ResizeEndEvent}
      * @action
      * @public
      */
-    onResizeEnd?: ((e: ResizeEndEvent) => void);
+    onResizeEnd?: ((e: ResizeEndEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/resizable:ResizeStartEvent}
      * @action
      * @public
      */
-    onResizeStart?: ((e: ResizeStartEvent) => void);
+    onResizeStart?: ((e: ResizeStartEvent) => void) | undefined;
     /**
      * @docid
      * @fires dxResizableOptions.onResize
diff --git a/packages/devextreme/js/ui/responsive_box.d.ts b/packages/devextreme/js/ui/responsive_box.d.ts
index 633b1407cc49..0e13c2a8292d 100644
--- a/packages/devextreme/js/ui/responsive_box.d.ts
+++ b/packages/devextreme/js/ui/responsive_box.d.ts
@@ -172,10 +172,10 @@ export interface dxResponsiveBoxOptions<
     }>;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @public
      */
-    screenByWidth?: Function;
+    screenByWidth?: Function | undefined;
     /**
      * @docid
      * @default ""
diff --git a/packages/devextreme/js/ui/scroll_view.d.ts b/packages/devextreme/js/ui/scroll_view.d.ts
index 8de3e64f39b0..0149bd31b422 100644
--- a/packages/devextreme/js/ui/scroll_view.d.ts
+++ b/packages/devextreme/js/ui/scroll_view.d.ts
@@ -77,20 +77,20 @@ export type UpdatedEvent = ScrollEventInfo<dxScrollView>;
 export interface dxScrollViewOptions extends dxScrollableOptions<dxScrollView> {
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/scroll_view:PullDownEvent}
      * @action
      * @public
      */
-    onPullDown?: ((e: PullDownEvent) => void);
+    onPullDown?: ((e: PullDownEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/scroll_view:ReachBottomEvent}
      * @action
      * @public
      */
-    onReachBottom?: ((e: ReachBottomEvent) => void);
+    onReachBottom?: ((e: ReachBottomEvent) => void) | undefined;
     /**
      * @docid
      * @default "Release to refresh..."
diff --git a/packages/devextreme/js/ui/scroll_view/ui.scrollable.d.ts b/packages/devextreme/js/ui/scroll_view/ui.scrollable.d.ts
index 9600f8cc8f27..3ca926113792 100644
--- a/packages/devextreme/js/ui/scroll_view/ui.scrollable.d.ts
+++ b/packages/devextreme/js/ui/scroll_view/ui.scrollable.d.ts
@@ -70,7 +70,7 @@ export interface dxScrollableOptions<TComponent> extends DOMComponentOptions<TCo
      * @action
      * @public
      */
-    onScroll?: ((e: ScrollEventInfo<TComponent>) => void);
+    onScroll?: ((e: ScrollEventInfo<TComponent>) => void) | null;
     /**
      * @docid
      * @default null
@@ -78,7 +78,7 @@ export interface dxScrollableOptions<TComponent> extends DOMComponentOptions<TCo
      * @action
      * @public
      */
-    onUpdated?: ((e: ScrollEventInfo<TComponent>) => void);
+    onUpdated?: ((e: ScrollEventInfo<TComponent>) => void) | null;
     /**
      * @docid
      * @default false &for(non-touch_devices)
diff --git a/packages/devextreme/js/ui/select_box.d.ts b/packages/devextreme/js/ui/select_box.d.ts
index 8292c009cb41..9ed8d0eae740 100644
--- a/packages/devextreme/js/ui/select_box.d.ts
+++ b/packages/devextreme/js/ui/select_box.d.ts
@@ -234,7 +234,7 @@ export interface dxSelectBoxOptions<TComponent> extends dxDropDownListOptions<TC
      * @public
      * @deprecated dxDropDownEditorOptions.fieldAddons
      */
-    fieldTemplate?: template | ((selectedItem: any, fieldElement: DxElement) => string | UserDefinedElement);
+    fieldTemplate?: template | ((selectedItem: any, fieldElement: DxElement) => string | UserDefinedElement) | null;
     /**
      * @docid
      * @default null
diff --git a/packages/devextreme/js/ui/speed_dial_action.d.ts b/packages/devextreme/js/ui/speed_dial_action.d.ts
index 6549577c0217..0d9c9948350c 100644
--- a/packages/devextreme/js/ui/speed_dial_action.d.ts
+++ b/packages/devextreme/js/ui/speed_dial_action.d.ts
@@ -92,12 +92,12 @@ export interface dxSpeedDialActionOptions extends WidgetOptions<dxSpeedDialActio
     onClick?: ((e: ClickEvent) => void);
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/speed_dial_action:ContentReadyEvent}
      * @action
      * @public
      */
-    onContentReady?: ((e: ContentReadyEvent) => void);
+    onContentReady?: ((e: ContentReadyEvent) => void) | undefined;
     /**
      * @docid
      * @public
diff --git a/packages/devextreme/js/ui/splitter.d.ts b/packages/devextreme/js/ui/splitter.d.ts
index 0b3bac19edf7..6272f6090279 100644
--- a/packages/devextreme/js/ui/splitter.d.ts
+++ b/packages/devextreme/js/ui/splitter.d.ts
@@ -180,44 +180,44 @@ export interface dxSplitterOptions<
     separatorSize?: number;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/splitter:ResizeEvent}
      * @action
      * @public
      */
-    onResize?: ((e: ResizeEvent) => void);
+    onResize?: ((e: ResizeEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/splitter:ResizeEndEvent}
      * @action
      * @public
      */
-    onResizeEnd?: ((e: ResizeEndEvent) => void);
+    onResizeEnd?: ((e: ResizeEndEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/splitter:ResizeStartEvent}
      * @action
      * @public
      */
-    onResizeStart?: ((e: ResizeStartEvent) => void);
+    onResizeStart?: ((e: ResizeStartEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/splitter:ItemExpandedEvent}
      * @action
      * @public
      */
-    onItemExpanded?: ((e: ItemExpandedEvent) => void);
+    onItemExpanded?: ((e: ItemExpandedEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/splitter:ItemCollapsedEvent}
      * @action
      * @public
      */
-    onItemCollapsed?: ((e: ItemCollapsedEvent) => void);
+    onItemCollapsed?: ((e: ItemCollapsedEvent) => void) | undefined;
 }
 /**
  * @docid
diff --git a/packages/devextreme/js/ui/tab_panel.d.ts b/packages/devextreme/js/ui/tab_panel.d.ts
index da990eae6bb6..1995ed1f7781 100644
--- a/packages/devextreme/js/ui/tab_panel.d.ts
+++ b/packages/devextreme/js/ui/tab_panel.d.ts
@@ -224,23 +224,23 @@ export interface dxTabPanelOptions<
      * @action
      * @public
      */
-    onTitleClick?: ((e: TitleClickEvent<TItem, TKey>) => void) | string;
+    onTitleClick?: ((e: TitleClickEvent<TItem, TKey>) => void) | string | null;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/tab_panel:TitleHoldEvent}
      * @action
      * @public
      */
-    onTitleHold?: ((e: TitleHoldEvent<TItem, TKey>) => void);
+    onTitleHold?: ((e: TitleHoldEvent<TItem, TKey>) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/tab_panel:TitleRenderedEvent}
      * @action
      * @public
      */
-    onTitleRendered?: ((e: TitleRenderedEvent<TItem, TKey>) => void);
+    onTitleRendered?: ((e: TitleRenderedEvent<TItem, TKey>) => void) | undefined;
     /**
      * @docid
      * @default false
diff --git a/packages/devextreme/js/ui/tag_box.d.ts b/packages/devextreme/js/ui/tag_box.d.ts
index ab11d35f7a07..4bbc497bb6ee 100644
--- a/packages/devextreme/js/ui/tag_box.d.ts
+++ b/packages/devextreme/js/ui/tag_box.d.ts
@@ -238,28 +238,28 @@ export interface dxTagBoxOptions extends Pick<dxSelectBoxOptions<dxTagBox>, Excl
     multiline?: boolean;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/tag_box:MultiTagPreparingEvent}
      * @action
      * @public
      */
-    onMultiTagPreparing?: ((e: MultiTagPreparingEvent) => void);
+    onMultiTagPreparing?: ((e: MultiTagPreparingEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/tag_box:SelectAllValueChangedEvent}
      * @action
      * @public
      */
-    onSelectAllValueChanged?: ((e: SelectAllValueChangedEvent) => void);
+    onSelectAllValueChanged?: ((e: SelectAllValueChangedEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/tag_box:SelectionChangedEvent}
      * @action
      * @public
      */
-    onSelectionChanged?: ((e: SelectionChangedEvent) => void);
+    onSelectionChanged?: ((e: SelectionChangedEvent) => void) | undefined;
     /**
      * @docid
      * @default 'page'
diff --git a/packages/devextreme/js/ui/text_box.d.ts b/packages/devextreme/js/ui/text_box.d.ts
index b90560ec439e..ff52b648e20b 100644
--- a/packages/devextreme/js/ui/text_box.d.ts
+++ b/packages/devextreme/js/ui/text_box.d.ts
@@ -152,7 +152,7 @@ export interface dxTextBoxOptions<TComponent> extends dxTextEditorOptions<TCompo
      * @default null
      * @public
      */
-    maxLength?: string | number;
+    maxLength?: string | number | null;
     /**
      * @docid
      * @default "text"
diff --git a/packages/devextreme/js/ui/text_box/ui.text_editor.base.d.ts b/packages/devextreme/js/ui/text_box/ui.text_editor.base.d.ts
index e91f61d8fb7c..da499617463a 100644
--- a/packages/devextreme/js/ui/text_box/ui.text_editor.base.d.ts
+++ b/packages/devextreme/js/ui/text_box/ui.text_editor.base.d.ts
@@ -28,7 +28,7 @@ export interface dxTextEditorOptions<TComponent> extends EditorOptions<TComponen
      * @default undefined
      * @public
      */
-    buttons?: Array<string | TextBoxPredefinedButton | TextEditorButton>;
+    buttons?: Array<string | TextBoxPredefinedButton | TextEditorButton> | undefined;
     /**
      * @docid
      * @default true
@@ -98,7 +98,7 @@ export interface dxTextEditorOptions<TComponent> extends EditorOptions<TComponen
      * @action
      * @public
      */
-    onChange?: ((e: NativeEventInfo<TComponent, Event>) => void);
+    onChange?: ((e: NativeEventInfo<TComponent, Event>) => void) | null;
     /**
      * @docid
      * @default null
@@ -106,7 +106,7 @@ export interface dxTextEditorOptions<TComponent> extends EditorOptions<TComponen
      * @action
      * @public
      */
-    onCopy?: ((e: NativeEventInfo<TComponent, ClipboardEvent>) => void);
+    onCopy?: ((e: NativeEventInfo<TComponent, ClipboardEvent>) => void) | null;
     /**
      * @docid
      * @default null
@@ -114,7 +114,7 @@ export interface dxTextEditorOptions<TComponent> extends EditorOptions<TComponen
      * @action
      * @public
      */
-    onCut?: ((e: NativeEventInfo<TComponent, ClipboardEvent>) => void);
+    onCut?: ((e: NativeEventInfo<TComponent, ClipboardEvent>) => void) | null;
     /**
      * @docid
      * @default null
@@ -122,7 +122,7 @@ export interface dxTextEditorOptions<TComponent> extends EditorOptions<TComponen
      * @action
      * @public
      */
-    onEnterKey?: ((e: NativeEventInfo<TComponent, KeyboardEvent>) => void);
+    onEnterKey?: ((e: NativeEventInfo<TComponent, KeyboardEvent>) => void) | null;
     /**
      * @docid
      * @default null
@@ -130,7 +130,7 @@ export interface dxTextEditorOptions<TComponent> extends EditorOptions<TComponen
      * @action
      * @public
      */
-    onFocusIn?: ((e: NativeEventInfo<TComponent, FocusEvent>) => void);
+    onFocusIn?: ((e: NativeEventInfo<TComponent, FocusEvent>) => void) | null;
     /**
      * @docid
      * @default null
@@ -138,7 +138,7 @@ export interface dxTextEditorOptions<TComponent> extends EditorOptions<TComponen
      * @action
      * @public
      */
-    onFocusOut?: ((e: NativeEventInfo<TComponent, FocusEvent>) => void);
+    onFocusOut?: ((e: NativeEventInfo<TComponent, FocusEvent>) => void) | null;
     /**
      * @docid
      * @default null
@@ -146,7 +146,7 @@ export interface dxTextEditorOptions<TComponent> extends EditorOptions<TComponen
      * @action
      * @public
      */
-    onInput?: ((e: NativeEventInfo<TComponent, UIEvent>) => void);
+    onInput?: ((e: NativeEventInfo<TComponent, UIEvent>) => void) | null;
     /**
      * @docid
      * @type_function_param1 e:NativeEventInfo
@@ -154,7 +154,7 @@ export interface dxTextEditorOptions<TComponent> extends EditorOptions<TComponen
      * @action
      * @public
      */
-    onKeyDown?: ((e: NativeEventInfo<TComponent, KeyboardEvent>) => void);
+    onKeyDown?: ((e: NativeEventInfo<TComponent, KeyboardEvent>) => void) | null;
     /**
      * @docid
      * @default null
@@ -162,7 +162,7 @@ export interface dxTextEditorOptions<TComponent> extends EditorOptions<TComponen
      * @action
      * @public
      */
-    onKeyUp?: ((e: NativeEventInfo<TComponent, KeyboardEvent>) => void);
+    onKeyUp?: ((e: NativeEventInfo<TComponent, KeyboardEvent>) => void) | null;
     /**
      * @docid
      * @default null
@@ -170,7 +170,7 @@ export interface dxTextEditorOptions<TComponent> extends EditorOptions<TComponen
      * @action
      * @public
      */
-    onPaste?: ((e: NativeEventInfo<TComponent, ClipboardEvent>) => void);
+    onPaste?: ((e: NativeEventInfo<TComponent, ClipboardEvent>) => void) | null;
     /**
      * @docid
      * @default ""
diff --git a/packages/devextreme/js/ui/tree_view.d.ts b/packages/devextreme/js/ui/tree_view.d.ts
index d83b61dce737..eed9cc5d926a 100644
--- a/packages/devextreme/js/ui/tree_view.d.ts
+++ b/packages/devextreme/js/ui/tree_view.d.ts
@@ -257,78 +257,78 @@ export interface dxTreeViewOptions<TItem extends ItemLike = any, TKey = any>
     items?: Array<TItem>;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/tree_view:ItemClickEvent}
 
      * @action
      * @public
      */
-    onItemClick?: ((e: ItemClickEvent<TItem, TKey>) => void);
+    onItemClick?: ((e: ItemClickEvent<TItem, TKey>) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/tree_view:ItemCollapsedEvent}
      * @action
      * @public
      */
-    onItemCollapsed?: ((e: ItemCollapsedEvent<TItem, TKey>) => void);
+    onItemCollapsed?: ((e: ItemCollapsedEvent<TItem, TKey>) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/tree_view:ItemContextMenuEvent}
      * @action
      * @public
      */
-    onItemContextMenu?: ((e: ItemContextMenuEvent<TItem, TKey>) => void);
+    onItemContextMenu?: ((e: ItemContextMenuEvent<TItem, TKey>) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/tree_view:ItemExpandedEvent}
      * @action
      * @public
      */
-    onItemExpanded?: ((e: ItemExpandedEvent<TItem, TKey>) => void);
+    onItemExpanded?: ((e: ItemExpandedEvent<TItem, TKey>) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/tree_view:ItemHoldEvent}
      * @action
      * @public
      */
-    onItemHold?: ((e: ItemHoldEvent<TItem, TKey>) => void);
+    onItemHold?: ((e: ItemHoldEvent<TItem, TKey>) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/tree_view:ItemRenderedEvent}
      * @action
      * @public
      */
-    onItemRendered?: ((e: ItemRenderedEvent<TItem, TKey>) => void);
+    onItemRendered?: ((e: ItemRenderedEvent<TItem, TKey>) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/tree_view:ItemSelectionChangedEvent}
      * @action
      * @public
      */
-    onItemSelectionChanged?: ((e: ItemSelectionChangedEvent<TItem, TKey>) => void);
+    onItemSelectionChanged?: ((e: ItemSelectionChangedEvent<TItem, TKey>) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/tree_view:SelectAllValueChangedEvent}
      * @action
      * @public
      */
-    onSelectAllValueChanged?: ((e: SelectAllValueChangedEvent<TItem, TKey>) => void);
+    onSelectAllValueChanged?: ((e: SelectAllValueChangedEvent<TItem, TKey>) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/tree_view:SelectionChangedEvent}
      * @action
      * @public
      * @override
      */
-    onSelectionChanged?: ((e: SelectionChangedEvent<TItem, TKey>) => void);
+    onSelectionChanged?: ((e: SelectionChangedEvent<TItem, TKey>) => void) | undefined;
     /**
      * @docid
      * @default 'parentId'
diff --git a/packages/devextreme/js/ui/widget/ui.search_box_mixin.d.ts b/packages/devextreme/js/ui/widget/ui.search_box_mixin.d.ts
index d5baa4cd7e01..0345926d8f9d 100644
--- a/packages/devextreme/js/ui/widget/ui.search_box_mixin.d.ts
+++ b/packages/devextreme/js/ui/widget/ui.search_box_mixin.d.ts
@@ -31,7 +31,7 @@ export interface SearchBoxMixinOptions {
      * @default null
      * @public
      */
-    searchExpr?: string | Function | Array<string | Function>;
+    searchExpr?: string | Function | Array<string | Function> | null;
     /**
      * @docid
      * @default 'contains'
diff --git a/packages/devextreme/js/ui/widget/ui.widget.d.ts b/packages/devextreme/js/ui/widget/ui.widget.d.ts
index 317caaa22a56..473e39ee7fe4 100644
--- a/packages/devextreme/js/ui/widget/ui.widget.d.ts
+++ b/packages/devextreme/js/ui/widget/ui.widget.d.ts
@@ -51,11 +51,11 @@ export interface WidgetOptions<TComponent> extends DOMComponentOptions<TComponen
     hoverStateEnabled?: boolean;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @action
      * @public
      */
-    onContentReady?: ((e: EventInfo<TComponent>) => void);
+    onContentReady?: ((e: EventInfo<TComponent>) => void) | undefined;
     /**
      * @docid
      * @default 0
diff --git a/packages/devextreme/js/viz/bar_gauge.d.ts b/packages/devextreme/js/viz/bar_gauge.d.ts
index 939b8d0f1d68..9b985db15941 100644
--- a/packages/devextreme/js/viz/bar_gauge.d.ts
+++ b/packages/devextreme/js/viz/bar_gauge.d.ts
@@ -299,22 +299,22 @@ export interface dxBarGaugeOptions extends BaseWidgetOptions<dxBarGauge> {
     loadingIndicator?: LoadingIndicator;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{viz/bar_gauge:TooltipHiddenEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onTooltipHidden?: ((e: TooltipHiddenEvent) => void);
+    onTooltipHidden?: ((e: TooltipHiddenEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{viz/bar_gauge:TooltipShownEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onTooltipShown?: ((e: TooltipShownEvent) => void);
+    onTooltipShown?: ((e: TooltipShownEvent) => void) | undefined;
     /**
      * @docid
      * @default "Material"
diff --git a/packages/devextreme/js/viz/chart.d.ts b/packages/devextreme/js/viz/chart.d.ts
index d7b79f3f6adc..dc849d55b362 100644
--- a/packages/devextreme/js/viz/chart.d.ts
+++ b/packages/devextreme/js/viz/chart.d.ts
@@ -1347,70 +1347,70 @@ export interface dxChartOptions extends BaseChartOptions<dxChart, chartPointObje
     negativesAsZeroes?: boolean;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type function
      * @type_function_param1 e:{viz/chart:ArgumentAxisClickEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onArgumentAxisClick?: ((e: ArgumentAxisClickEvent) => void) | string;
+    onArgumentAxisClick?: ((e: ArgumentAxisClickEvent) => void) | string | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type function
      * @type_function_param1 e:{viz/chart:LegendClickEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onLegendClick?: ((e: LegendClickEvent) => void) | string;
+    onLegendClick?: ((e: LegendClickEvent) => void) | string | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type function
      * @type_function_param1 e:{viz/chart:SeriesClickEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onSeriesClick?: ((e: SeriesClickEvent) => void) | string;
+    onSeriesClick?: ((e: SeriesClickEvent) => void) | string | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{viz/chart:SeriesHoverChangedEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onSeriesHoverChanged?: ((e: SeriesHoverChangedEvent) => void);
+    onSeriesHoverChanged?: ((e: SeriesHoverChangedEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{viz/chart:SeriesSelectionChangedEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onSeriesSelectionChanged?: ((e: SeriesSelectionChangedEvent) => void);
+    onSeriesSelectionChanged?: ((e: SeriesSelectionChangedEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{viz/chart:ZoomEndEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onZoomEnd?: ((e: ZoomEndEvent) => void);
+    onZoomEnd?: ((e: ZoomEndEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{viz/chart:ZoomStartEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onZoomStart?: ((e: ZoomStartEvent) => void);
+    onZoomStart?: ((e: ZoomStartEvent) => void) | undefined;
     /**
      * @docid
      * @type Object|Array<Object>
@@ -1620,7 +1620,7 @@ export type ArgumentAxis = CommonAxisSettings & {
      * @notUsedInTheme
      * @public
      */
-    breaks?: Array<ScaleBreak>;
+    breaks?: Array<ScaleBreak> | undefined;
     /**
      * @docid dxChartOptions.argumentAxis.categories
      * @public
@@ -1652,7 +1652,7 @@ export type ArgumentAxis = CommonAxisSettings & {
      * @default undefined
      * @public
      */
-    holidays?: Array<Date | string> | Array<number>;
+    holidays?: Array<Date | string> | Array<number> | undefined;
     /**
      * @docid dxChartOptions.argumentAxis.hoverMode
      * @default 'none'
@@ -1685,7 +1685,7 @@ export type ArgumentAxis = CommonAxisSettings & {
      * @notUsedInTheme
      * @public
      */
-    minVisualRangeLength?: TimeIntervalConfig;
+    minVisualRangeLength?: TimeIntervalConfig | undefined;
     /**
      * @docid dxChartOptions.argumentAxis.minorTickCount
      * @default undefined
@@ -1728,7 +1728,7 @@ export type ArgumentAxis = CommonAxisSettings & {
      * @default undefined
      * @public
      */
-    singleWorkdays?: Array<Date | string> | Array<number>;
+    singleWorkdays?: Array<Date | string> | Array<number> | undefined;
     /**
      * @docid dxChartOptions.argumentAxis.strips
      * @type Array<Object>
@@ -2143,7 +2143,7 @@ export type CommonAxisSettings = {
      * @default null
      * @public
      */
-    placeholderSize?: number;
+    placeholderSize?: number | null;
     /**
      * @docid dxChartOptions.commonAxisSettings.stripStyle
      * @type object
@@ -2741,7 +2741,7 @@ export type ValueAxis = CommonAxisSettings & {
      * @notUsedInTheme
      * @public
      */
-    breaks?: Array<ScaleBreak>;
+    breaks?: Array<ScaleBreak> | undefined;
     /**
      * @docid dxChartOptions.valueAxis.categories
      * @public
@@ -2800,7 +2800,7 @@ export type ValueAxis = CommonAxisSettings & {
      * @notUsedInTheme
      * @public
      */
-    minVisualRangeLength?: TimeIntervalConfig;
+    minVisualRangeLength?: TimeIntervalConfig | undefined;
     /**
      * @docid dxChartOptions.valueAxis.minorTickCount
      * @default undefined
@@ -4019,7 +4019,7 @@ export interface dxChartSeriesTypesCommonSeriesHoverStyleBorder {
     color?: string | undefined;
     /**
      * @docid dxChartSeriesTypes.CommonSeries.hoverStyle.border.dashStyle
-     * @default 'solid'
+     * @default undefined
      * @public
      */
     dashStyle?: DashStyle | undefined;
@@ -4117,7 +4117,7 @@ export interface dxChartSeriesTypesCommonSeriesSelectionStyleBorder {
     color?: string | undefined;
     /**
      * @docid dxChartSeriesTypes.CommonSeries.selectionStyle.border.dashStyle
-     * @default 'solid'
+     * @default undefined
      * @public
      */
     dashStyle?: DashStyle | undefined;
diff --git a/packages/devextreme/js/viz/chart_components/base_chart.d.ts b/packages/devextreme/js/viz/chart_components/base_chart.d.ts
index 9763c3d45f7a..986015bb5023 100644
--- a/packages/devextreme/js/viz/chart_components/base_chart.d.ts
+++ b/packages/devextreme/js/viz/chart_components/base_chart.d.ts
@@ -204,15 +204,15 @@ export interface BaseChartOptions<
     legend?: BaseChartLegend;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @notUsedInTheme
      * @action
      * @public
      */
-    onDone?: ((e: EventInfo<TComponent>) => void);
+    onDone?: ((e: EventInfo<TComponent>) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type function
      * @type_function_param1 e:object
      * @type_function_param1_field component:this
@@ -222,7 +222,7 @@ export interface BaseChartOptions<
      * @action
      * @public
      */
-    onPointClick?: ((e: NativeEventInfo<TComponent, MouseEvent | PointerEvent> & PointInteractionInfo<TPoint>) => void) | string;
+    onPointClick?: ((e: NativeEventInfo<TComponent, MouseEvent | PointerEvent> & PointInteractionInfo<TPoint>) => void) | string | undefined;
     /**
      * @docid
      * @type_function_param1 e:object
@@ -247,7 +247,7 @@ export interface BaseChartOptions<
     onPointSelectionChanged?: ((e: EventInfo<TComponent> & PointInteractionInfo<TPoint>) => void);
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:object
      * @type_function_param1_field component:this
      * @type_function_param1_field target:object
@@ -255,10 +255,10 @@ export interface BaseChartOptions<
      * @action
      * @public
      */
-    onTooltipHidden?: ((e: EventInfo<TComponent> & TooltipInfo<TPoint>) => void);
+    onTooltipHidden?: ((e: EventInfo<TComponent> & TooltipInfo<TPoint>) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:object
      * @type_function_param1_field component:this
      * @type_function_param1_field target:object
@@ -266,7 +266,7 @@ export interface BaseChartOptions<
      * @action
      * @public
      */
-    onTooltipShown?: ((e: EventInfo<TComponent> & TooltipInfo<TPoint>) => void);
+    onTooltipShown?: ((e: EventInfo<TComponent> & TooltipInfo<TPoint>) => void) | undefined;
     /**
      * @docid
      * @default "Material"
diff --git a/packages/devextreme/js/viz/common.d.ts b/packages/devextreme/js/viz/common.d.ts
index 9ace9ee1b3b0..abdd5fe9136e 100644
--- a/packages/devextreme/js/viz/common.d.ts
+++ b/packages/devextreme/js/viz/common.d.ts
@@ -245,15 +245,15 @@ export interface BaseLegend {
         offset?: number;
         /**
          * @docid
-         * @default null
+         * @default undefined
          */
-        text?: string;
+        text?: string | undefined;
       } | string;
       /**
        * @docid
-       * @default null
+       * @default undefined
        */
-      text?: string;
+      text?: string | undefined;
       /**
        * @docid
        * @default 'top'
diff --git a/packages/devextreme/js/viz/core/base_widget.d.ts b/packages/devextreme/js/viz/core/base_widget.d.ts
index 21b59a57d498..b1de914aab3b 100644
--- a/packages/devextreme/js/viz/core/base_widget.d.ts
+++ b/packages/devextreme/js/viz/core/base_widget.d.ts
@@ -114,39 +114,38 @@ export interface BaseWidgetOptions<TComponent> extends DOMComponentOptions<TComp
     margin?: BaseWidgetMargin;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @notUsedInTheme
      * @action
      * @public
      */
-    onDrawn?: ((e: EventInfo<TComponent>) => void);
+    onDrawn?: ((e: EventInfo<TComponent>) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @action
      * @public
      */
-    onExported?: ((e: EventInfo<TComponent>) => void);
+    onExported?: ((e: EventInfo<TComponent>) => void) | undefined;
     /**
      * @docid
      * @type_function_param1 e:object
      * @type_function_param1_field component:this
-     * @default null
+     * @default undefined
      * @action
      * @public
      */
-    onExporting?: ((e: EventInfo<TComponent> & ExportInfo) => void);
+    onExporting?: ((e: EventInfo<TComponent> & ExportInfo) => void) | undefined;
     /**
      * @docid
      * @type_function_param1 e:{viz/core/base_widget:FileSavingEventInfo}
-     * @default null
+     * @default undefined
      * @action
      * @public
      */
-    onFileSaving?: ((e: FileSavingEventInfo<TComponent>) => void);
+    onFileSaving?: ((e: FileSavingEventInfo<TComponent>) => void) | undefined;
     /**
      * @docid
-     * @default null
      * @type_function_param1 e:object
      * @type_function_param1_field component:this
      * @action
@@ -420,9 +419,9 @@ export interface BaseWidgetTitle {
       offset?: number;
       /**
        * @docid BaseWidgetOptions.title.subtitle.text
-       * @default null
+       * @default undefined
        */
-      text?: string;
+      text?: string | undefined;
       /**
        * @docid BaseWidgetOptions.title.subtitle.textOverflow
        * @default "ellipsis"
@@ -436,10 +435,10 @@ export interface BaseWidgetTitle {
     } | string;
     /**
      * @docid BaseWidgetOptions.title.text
-     * @default null
+     * @default undefined
      * @public
      */
-    text?: string;
+    text?: string | undefined;
     /**
      * @docid BaseWidgetOptions.title.textOverflow
      * @default "ellipsis"
diff --git a/packages/devextreme/js/viz/funnel.d.ts b/packages/devextreme/js/viz/funnel.d.ts
index 7f411d7f25d4..09d13c6c7dbc 100644
--- a/packages/devextreme/js/viz/funnel.d.ts
+++ b/packages/devextreme/js/viz/funnel.d.ts
@@ -518,42 +518,42 @@ export interface dxFunnelOptions extends BaseWidgetOptions<dxFunnel> {
     neckWidth?: number;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{viz/funnel:HoverChangedEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onHoverChanged?: ((e: HoverChangedEvent) => void);
+    onHoverChanged?: ((e: HoverChangedEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type function
      * @type_function_param1 e:{viz/funnel:ItemClickEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onItemClick?: ((e: ItemClickEvent) => void) | string;
+    onItemClick?: ((e: ItemClickEvent) => void) | string | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type function
      * @type_function_param1 e:{viz/funnel:LegendClickEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onLegendClick?: ((e: LegendClickEvent) => void) | string;
+    onLegendClick?: ((e: LegendClickEvent) => void) | string | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{viz/funnel:SelectionChangedEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onSelectionChanged?: ((e: SelectionChangedEvent) => void);
+    onSelectionChanged?: ((e: SelectionChangedEvent) => void) | undefined;
     /**
      * @docid
      * @default "Material"
diff --git a/packages/devextreme/js/viz/gauges/base_gauge.d.ts b/packages/devextreme/js/viz/gauges/base_gauge.d.ts
index 3d169ef86766..f2f69ae21d64 100644
--- a/packages/devextreme/js/viz/gauges/base_gauge.d.ts
+++ b/packages/devextreme/js/viz/gauges/base_gauge.d.ts
@@ -78,10 +78,10 @@ export interface BaseGaugeOptions<TComponent> extends BaseWidgetOptions<TCompone
      * @action
      * @public
      */
-    onTooltipHidden?: ((e: EventInfo<TComponent> & TooltipInfo) => void);
+    onTooltipHidden?: ((e: EventInfo<TComponent> & TooltipInfo) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:object
      * @type_function_param1_field component:this
      * @type_function_param1_field target:object
@@ -89,7 +89,7 @@ export interface BaseGaugeOptions<TComponent> extends BaseWidgetOptions<TCompone
      * @action
      * @public
      */
-    onTooltipShown?: ((e: EventInfo<TComponent> & TooltipInfo) => void);
+    onTooltipShown?: ((e: EventInfo<TComponent> & TooltipInfo) => void) | undefined;
     /**
      * @docid
      * @type object
@@ -109,7 +109,7 @@ export interface BaseGaugeOptions<TComponent> extends BaseWidgetOptions<TCompone
      * @fires BaseWidgetOptions.onOptionChanged
      * @public
      */
-    subvalues?: Array<number>;
+    subvalues?: Array<number> | undefined;
     /**
      * @docid
      * @type object
@@ -231,14 +231,14 @@ export interface BaseGaugeScale {
      * @notUsedInTheme
      * @public
      */
-    customMinorTicks?: Array<number>;
+    customMinorTicks?: Array<number> | undefined;
     /**
      * @docid BaseGaugeOptions.scale.customTicks
      * @default undefined
      * @notUsedInTheme
      * @public
      */
-    customTicks?: Array<number>;
+    customTicks?: Array<number> | undefined;
     /**
      * @docid BaseGaugeOptions.scale.endValue
      * @default 100
diff --git a/packages/devextreme/js/viz/pie_chart.d.ts b/packages/devextreme/js/viz/pie_chart.d.ts
index 035119d3f49e..98f7a0d9995f 100644
--- a/packages/devextreme/js/viz/pie_chart.d.ts
+++ b/packages/devextreme/js/viz/pie_chart.d.ts
@@ -349,14 +349,14 @@ export interface dxPieChartOptions extends BaseChartOptions<dxPieChart, piePoint
     minDiameter?: number;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type function
      * @type_function_param1 e:{viz/pie_chart:LegendClickEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onLegendClick?: ((e: LegendClickEvent) => void) | string;
+    onLegendClick?: ((e: LegendClickEvent) => void) | string | undefined;
     /**
      * @docid
      * @default "Material"
diff --git a/packages/devextreme/js/viz/polar_chart.d.ts b/packages/devextreme/js/viz/polar_chart.d.ts
index 002f56db7698..ff0482ab855d 100644
--- a/packages/devextreme/js/viz/polar_chart.d.ts
+++ b/packages/devextreme/js/viz/polar_chart.d.ts
@@ -437,70 +437,70 @@ export interface dxPolarChartOptions extends BaseChartOptions<dxPolarChart, pola
     negativesAsZeroes?: boolean;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type function
      * @type_function_param1 e:{viz/polar_chart:ArgumentAxisClickEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onArgumentAxisClick?: ((e: ArgumentAxisClickEvent) => void) | string;
+    onArgumentAxisClick?: ((e: ArgumentAxisClickEvent) => void) | string | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type function
      * @type_function_param1 e:{viz/polar_chart:LegendClickEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onLegendClick?: ((e: LegendClickEvent) => void) | string;
+    onLegendClick?: ((e: LegendClickEvent) => void) | string | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type function
      * @type_function_param1 e:{viz/polar_chart:SeriesClickEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onSeriesClick?: ((e: SeriesClickEvent) => void) | string;
+    onSeriesClick?: ((e: SeriesClickEvent) => void) | string | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{viz/polar_chart:SeriesHoverChangedEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onSeriesHoverChanged?: ((e: SeriesHoverChangedEvent) => void);
+    onSeriesHoverChanged?: ((e: SeriesHoverChangedEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{viz/polar_chart:SeriesSelectionChangedEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onSeriesSelectionChanged?: ((e: SeriesSelectionChangedEvent) => void);
+    onSeriesSelectionChanged?: ((e: SeriesSelectionChangedEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{viz/polar_chart:ZoomEndEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onZoomEnd?: ((e: ZoomEndEvent) => void);
+    onZoomEnd?: ((e: ZoomEndEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{viz/polar_chart:ZoomStartEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onZoomStart?: ((e: ZoomStartEvent) => void);
+    onZoomStart?: ((e: ZoomStartEvent) => void) | undefined;
     /**
      * @docid
      * @default "none"
@@ -1324,7 +1324,7 @@ export type ValueAxis = CommonAxisSettings & {
      * @notUsedInTheme
      * @public
      */
-    minVisualRangeLength?: TimeIntervalConfig;
+    minVisualRangeLength?: TimeIntervalConfig | undefined;
     /**
      * @docid dxPolarChartOptions.valueAxis.minorTickCount
      * @default undefined
@@ -1758,7 +1758,7 @@ export interface dxPolarChartSeriesTypesCommonPolarChartSeries {
         color?: string | undefined;
         /**
          * @docid dxPolarChartSeriesTypes.CommonPolarChartSeries.hoverStyle.border.dashStyle
-         * @default 'solid'
+         * @default undefined
          */
         dashStyle?: DashStyle | undefined;
         /**
@@ -1885,7 +1885,7 @@ export interface dxPolarChartSeriesTypesCommonPolarChartSeries {
         color?: string | undefined;
         /**
          * @docid dxPolarChartSeriesTypes.CommonPolarChartSeries.selectionStyle.border.dashStyle
-         * @default 'solid'
+         * @default undefined
          */
         dashStyle?: DashStyle | undefined;
         /**
diff --git a/packages/devextreme/js/viz/range_selector.d.ts b/packages/devextreme/js/viz/range_selector.d.ts
index 3a7b3d6a76cd..f6d3a09d4c85 100644
--- a/packages/devextreme/js/viz/range_selector.d.ts
+++ b/packages/devextreme/js/viz/range_selector.d.ts
@@ -292,7 +292,6 @@ export interface dxRangeSelectorOptions extends BaseWidgetOptions<dxRangeSelecto
       series?: ChartSeries | Array<ChartSeries> | undefined;
       /**
        * @docid
-       * @default undefined
        */
       seriesTemplate?: {
         /**
@@ -385,13 +384,13 @@ export interface dxRangeSelectorOptions extends BaseWidgetOptions<dxRangeSelecto
     };
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{viz/range_selector:ValueChangedEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onValueChanged?: ((e: ValueChangedEvent) => void);
+    onValueChanged?: ((e: ValueChangedEvent) => void) | undefined;
     /**
      * @docid
      * @public
@@ -445,7 +444,7 @@ export interface dxRangeSelectorOptions extends BaseWidgetOptions<dxRangeSelecto
        * @default undefined
        * @notUsedInTheme
        */
-      breaks?: Array<ScaleBreak>;
+      breaks?: Array<ScaleBreak> | undefined;
       /**
        * @docid
        */
@@ -465,7 +464,7 @@ export interface dxRangeSelectorOptions extends BaseWidgetOptions<dxRangeSelecto
        * @docid
        * @default undefined
        */
-      holidays?: Array<Date | string> | Array<number>;
+      holidays?: Array<Date | string> | Array<number> | undefined;
       /**
        * @docid
        */
@@ -619,7 +618,7 @@ export interface dxRangeSelectorOptions extends BaseWidgetOptions<dxRangeSelecto
        * @docid
        * @default undefined
        */
-      singleWorkdays?: Array<Date | string> | Array<number>;
+      singleWorkdays?: Array<Date | string> | Array<number> | undefined;
       /**
        * @docid
        * @default undefined
diff --git a/packages/devextreme/js/viz/sankey.d.ts b/packages/devextreme/js/viz/sankey.d.ts
index db5b69978e36..092c372402f6 100644
--- a/packages/devextreme/js/viz/sankey.d.ts
+++ b/packages/devextreme/js/viz/sankey.d.ts
@@ -205,7 +205,7 @@ export interface dxSankeyOptions extends BaseWidgetOptions<dxSankey> {
       border?: {
         /**
          * @docid
-         * @default '#000000'
+         * @default '#ffffff'
          */
         color?: string | undefined;
         /**
@@ -296,7 +296,7 @@ export interface dxSankeyOptions extends BaseWidgetOptions<dxSankey> {
       border?: {
         /**
          * @docid
-         * @default '#000000'
+         * @default '#ffffff'
          */
         color?: string | undefined;
         /**
@@ -306,7 +306,7 @@ export interface dxSankeyOptions extends BaseWidgetOptions<dxSankey> {
         visible?: boolean | undefined;
         /**
          * @docid
-         * @default 2
+         * @default 1
          */
         width?: number | undefined;
       };
@@ -376,7 +376,7 @@ export interface dxSankeyOptions extends BaseWidgetOptions<dxSankey> {
         };
         /**
          * @docid
-         * @default 0.5
+         * @default undefined
          */
         opacity?: number | undefined;
       };
@@ -397,7 +397,7 @@ export interface dxSankeyOptions extends BaseWidgetOptions<dxSankey> {
       border?: {
         /**
          * @docid
-         * @default '#000000'
+         * @default '#ffffff'
          */
         color?: string | undefined;
         /**
@@ -494,42 +494,42 @@ export interface dxSankeyOptions extends BaseWidgetOptions<dxSankey> {
     };
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type function
      * @type_function_param1 e:{viz/sankey:LinkClickEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onLinkClick?: ((e: LinkClickEvent) => void) | string;
+    onLinkClick?: ((e: LinkClickEvent) => void) | string | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{viz/sankey:LinkHoverEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onLinkHoverChanged?: ((e: LinkHoverEvent) => void);
+    onLinkHoverChanged?: ((e: LinkHoverEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type function
      * @type_function_param1 e:{viz/sankey:NodeClickEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onNodeClick?: ((e: NodeClickEvent) => void) | string;
+    onNodeClick?: ((e: NodeClickEvent) => void) | string | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{viz/sankey:NodeHoverEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onNodeHoverChanged?: ((e: NodeHoverEvent) => void);
+    onNodeHoverChanged?: ((e: NodeHoverEvent) => void) | undefined;
     /**
      * @docid
      * @default "Material"
diff --git a/packages/devextreme/js/viz/sparklines/base_sparkline.d.ts b/packages/devextreme/js/viz/sparklines/base_sparkline.d.ts
index 70fe5a8d4cf3..2df6969d488d 100644
--- a/packages/devextreme/js/viz/sparklines/base_sparkline.d.ts
+++ b/packages/devextreme/js/viz/sparklines/base_sparkline.d.ts
@@ -39,20 +39,20 @@ export interface BaseSparklineOptions<TComponent> extends BaseWidgetOptions<TCom
     loadingIndicator?: BaseWidgetLoadingIndicator;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @notUsedInTheme
      * @action
      * @public
      */
-    onTooltipHidden?: ((e: EventInfo<TComponent>) => void);
+    onTooltipHidden?: ((e: EventInfo<TComponent>) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @notUsedInTheme
      * @action
      * @public
      */
-    onTooltipShown?: ((e: EventInfo<TComponent>) => void);
+    onTooltipShown?: ((e: EventInfo<TComponent>) => void) | undefined;
     /**
      * @docid
      * @hidden
diff --git a/packages/devextreme/js/viz/tree_map.d.ts b/packages/devextreme/js/viz/tree_map.d.ts
index dfe2f00fcb6c..9620753e6f9c 100644
--- a/packages/devextreme/js/viz/tree_map.d.ts
+++ b/packages/devextreme/js/viz/tree_map.d.ts
@@ -228,7 +228,7 @@ export interface dxTreeMapOptions extends BaseWidgetOptions<dxTreeMap> {
        * @docid
        * @default undefined
        */
-      range?: Array<number>;
+      range?: Array<number> | undefined;
       /**
        * @docid
        * @default undefined
@@ -253,7 +253,7 @@ export interface dxTreeMapOptions extends BaseWidgetOptions<dxTreeMap> {
       border?: {
         /**
          * @docid
-         * @default "#d3d3d3"
+         * @default undefined
          */
         color?: string | undefined;
         /**
@@ -338,7 +338,7 @@ export interface dxTreeMapOptions extends BaseWidgetOptions<dxTreeMap> {
         border?: {
           /**
            * @docid
-           * @default "#232323"
+           * @default undefined
            */
           color?: string | undefined;
           /**
@@ -406,59 +406,59 @@ export interface dxTreeMapOptions extends BaseWidgetOptions<dxTreeMap> {
     maxDepth?: number | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type function
      * @type_function_param1 e:{viz/tree_map:ClickEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onClick?: ((e: ClickEvent) => void) | string;
+    onClick?: ((e: ClickEvent) => void) | string | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{viz/tree_map:DrillEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onDrill?: ((e: DrillEvent) => void);
+    onDrill?: ((e: DrillEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{viz/tree_map:HoverChangedEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onHoverChanged?: ((e: HoverChangedEvent) => void);
+    onHoverChanged?: ((e: HoverChangedEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{viz/tree_map:NodesInitializedEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onNodesInitialized?: ((e: NodesInitializedEvent) => void);
+    onNodesInitialized?: ((e: NodesInitializedEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{viz/tree_map:NodesRenderingEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onNodesRendering?: ((e: NodesRenderingEvent) => void);
+    onNodesRendering?: ((e: NodesRenderingEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{viz/tree_map:SelectionChangedEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onSelectionChanged?: ((e: SelectionChangedEvent) => void);
+    onSelectionChanged?: ((e: SelectionChangedEvent) => void) | undefined;
     /**
      * @docid
      * @default undefined
@@ -557,7 +557,7 @@ export interface dxTreeMapOptions extends BaseWidgetOptions<dxTreeMap> {
         border?: {
           /**
            * @docid
-           * @default "#232323"
+           * @default undefined
            */
           color?: string | undefined;
           /**
diff --git a/packages/devextreme/js/viz/vector_map.d.ts b/packages/devextreme/js/viz/vector_map.d.ts
index d9c75a2457b6..e362e22d67c7 100644
--- a/packages/devextreme/js/viz/vector_map.d.ts
+++ b/packages/devextreme/js/viz/vector_map.d.ts
@@ -360,7 +360,7 @@ export interface dxVectorMapOptions extends BaseWidgetOptions<dxVectorMap> {
      * @notUsedInTheme
      * @public
      */
-    bounds?: Array<number>;
+    bounds?: Array<number> | undefined;
     /**
      * @docid
      * @default [0, 0]
@@ -421,7 +421,6 @@ export interface dxVectorMapOptions extends BaseWidgetOptions<dxVectorMap> {
     };
     /**
      * @docid
-     * @default undefined
      * @notUsedInTheme
      * @public
      */
@@ -450,7 +449,7 @@ export interface dxVectorMapOptions extends BaseWidgetOptions<dxVectorMap> {
        * @docid
        * @default undefined
        */
-      colorGroups?: Array<number>;
+      colorGroups?: Array<number> | undefined;
       /**
        * @docid
        * @notUsedInTheme
@@ -579,7 +578,7 @@ export interface dxVectorMapOptions extends BaseWidgetOptions<dxVectorMap> {
        * @docid
        * @default undefined
        */
-      sizeGroups?: Array<number>;
+      sizeGroups?: Array<number> | undefined;
       /**
        * @docid
        * @notUsedInTheme
@@ -609,59 +608,59 @@ export interface dxVectorMapOptions extends BaseWidgetOptions<dxVectorMap> {
     maxZoomFactor?: number;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{viz/vector_map:CenterChangedEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onCenterChanged?: ((e: CenterChangedEvent) => void);
+    onCenterChanged?: ((e: CenterChangedEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type function
      * @type_function_param1 e:{viz/vector_map:ClickEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onClick?: ((e: ClickEvent) => void) | string;
+    onClick?: ((e: ClickEvent) => void) | string | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{viz/vector_map:SelectionChangedEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onSelectionChanged?: ((e: SelectionChangedEvent) => void);
+    onSelectionChanged?: ((e: SelectionChangedEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{viz/vector_map:TooltipHiddenEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onTooltipHidden?: ((e: TooltipHiddenEvent) => void);
+    onTooltipHidden?: ((e: TooltipHiddenEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{viz/vector_map:TooltipShownEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onTooltipShown?: ((e: TooltipShownEvent) => void);
+    onTooltipShown?: ((e: TooltipShownEvent) => void) | undefined;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{viz/vector_map:ZoomFactorChangedEvent}
      * @notUsedInTheme
      * @action
      * @public
      */
-    onZoomFactorChanged?: ((e: ZoomFactorChangedEvent) => void);
+    onZoomFactorChanged?: ((e: ZoomFactorChangedEvent) => void) | undefined;
     /**
      * @docid
      * @default true
@@ -754,7 +753,7 @@ export interface dxVectorMapCommonAnnotationConfig extends BaseWidgetAnnotationC
      * @default undefined
      * @public
      */
-    coordinates?: Array<number>;
+    coordinates?: Array<number> | undefined;
     /**
      * @docid
      * @type_function_return object
diff --git a/packages/devextreme/testing/helpers/dropDownOptions.js b/packages/devextreme/testing/helpers/dropDownOptions.js
index cc0d5a116c54..cd8295a3be24 100644
--- a/packages/devextreme/testing/helpers/dropDownOptions.js
+++ b/packages/devextreme/testing/helpers/dropDownOptions.js
@@ -30,18 +30,18 @@ const defaultDropDownOptions = {
     maxWidth: null,
     minHeight: null,
     minWidth: null,
-    onContentReady: null,
-    onDisposing: null,
+    onContentReady: undefined,
+    onDisposing: undefined,
     onHidden: null,
     onHiding: null,
-    onInitialized: null,
-    onOptionChanged: null,
-    onResize: null,
-    onResizeEnd: null,
-    onResizeStart: null,
+    onInitialized: undefined,
+    onOptionChanged: undefined,
+    onResize: undefined,
+    onResizeEnd: undefined,
+    onResizeStart: undefined,
     onShowing: null,
     onShown: null,
-    onTitleRendered: null,
+    onTitleRendered: undefined,
     position: null,
     resizeEnabled: false,
     rtlEnabled: false,
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/lookup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/lookup.tests.js
index 68edb2bdae39..076f033dfa29 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/lookup.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/lookup.tests.js
@@ -2511,12 +2511,22 @@ QUnit.module('popup options', {
         const lookup = $('#lookup').dxLookup({ }).dxLookup('instance');
         const dropDownOptionsAfterInit = { ... lookup.option('dropDownOptions') };
 
+        const normalizeOptions = (options) => {
+            const filteredEntries = Object.entries(options).filter(([key, value]) => {
+                return value !== undefined;
+            });
+            return Object.fromEntries(filteredEntries);
+        };
+
         lookup.open();
         lookup.option('dropDownOptions.width', 123);
 
         const { _cached_dropDownOptions } = lookup.option();
 
-        assert.deepEqual(_cached_dropDownOptions, { ...dropDownOptionsAfterInit, width: 123 }, 'updated part of dropDownOptions is cached in _cached_dropDownOptions');
+        assert.deepEqual(
+            normalizeOptions(_cached_dropDownOptions),
+            normalizeOptions({ ...dropDownOptionsAfterInit, width: 123 }),
+            'updated part of dropDownOptions is cached in _cached_dropDownOptions');
     });
 
     [
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/buttonGroup.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/buttonGroup.markup.tests.js
index 78b8e736cf35..8d15f83c3c15 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/buttonGroup.markup.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/buttonGroup.markup.tests.js
@@ -50,7 +50,7 @@ QUnit.module('default', {
         assert.strictEqual(getOptionValue('keyExpr'), 'text', 'keyExpr');
         assert.deepEqual(getOptionValue('items'), [], 'items');
         assert.strictEqual(getOptionValue('buttonTemplate'), 'content', 'buttonTemplate');
-        assert.strictEqual(getOptionValue('onSelectionChanged'), null, 'onSelectionChanged');
+        assert.strictEqual(getOptionValue('onSelectionChanged'), undefined, 'onSelectionChanged');
         assert.strictEqual(getOptionValue('stylingMode'), 'contained', 'stylingMode');
     });
 
diff --git a/packages/devextreme/ts/dx.all.d.ts b/packages/devextreme/ts/dx.all.d.ts
index d915f281adee..a7b5c56c9330 100644
--- a/packages/devextreme/ts/dx.all.d.ts
+++ b/packages/devextreme/ts/dx.all.d.ts
@@ -587,15 +587,15 @@ declare module DevExpress {
     /**
      * [descr:ComponentOptions.onDisposing]
      */
-    onDisposing?: (e: TDisposingEvent) => void;
+    onDisposing?: ((e: TDisposingEvent) => void) | undefined;
     /**
      * [descr:ComponentOptions.onInitialized]
      */
-    onInitialized?: (e: TInitializedEvent) => void;
+    onInitialized?: ((e: TInitializedEvent) => void) | undefined;
     /**
      * [descr:ComponentOptions.onOptionChanged]
      */
-    onOptionChanged?: (e: TOptionChangedEvent) => void;
+    onOptionChanged?: ((e: TOptionChangedEvent) => void) | undefined;
   }
   /**
    * [descr:config()]
@@ -714,15 +714,17 @@ declare module DevExpress {
     /**
      * [descr:DOMComponentOptions.onDisposing]
      */
-    onDisposing?: (
-      e: DevExpress.common.core.events.EventInfo<TComponent>
-    ) => void;
+    onDisposing?:
+      | ((e: DevExpress.common.core.events.EventInfo<TComponent>) => void)
+      | undefined;
     /**
      * [descr:DOMComponentOptions.onOptionChanged]
      */
-    onOptionChanged?: (
-      e: DevExpress.DOMComponent.OptionChangedEventInfo<TComponent>
-    ) => void;
+    onOptionChanged?:
+      | ((
+          e: DevExpress.DOMComponent.OptionChangedEventInfo<TComponent>
+        ) => void)
+      | undefined;
     /**
      * [descr:DOMComponentOptions.rtlEnabled]
      */
@@ -2000,13 +2002,13 @@ declare module DevExpress.common.charts {
                 /**
                  * [descr:BaseLegend.title.subtitle.text]
                  */
-                text?: string;
+                text?: string | undefined;
               }
             | string;
           /**
            * [descr:BaseLegend.title.text]
            */
-          text?: string;
+          text?: string | undefined;
           /**
            * [descr:BaseLegend.title.verticalAlignment]
            */
@@ -2566,7 +2568,7 @@ declare module DevExpress.common.charts {
     /**
      * [descr:VisualRange.length]
      */
-    length?: TimeIntervalConfig;
+    length?: TimeIntervalConfig | undefined;
     /**
      * [descr:VisualRange.startValue]
      */
@@ -9074,7 +9076,7 @@ declare module DevExpress.ui {
     /**
      * [descr:CollectionWidgetOptions.keyExpr]
      */
-    keyExpr?: string | ((item: TItem) => TKey);
+    keyExpr?: string | ((item: TItem) => TKey) | null;
     /**
      * [descr:CollectionWidgetOptions.noDataText]
      */
@@ -9090,47 +9092,58 @@ declare module DevExpress.ui {
           > &
             DevExpress.common.core.events.ItemInfo<TItem>
         ) => void)
-      | string;
+      | string
+      | null;
     /**
      * [descr:CollectionWidgetOptions.onItemContextMenu]
      */
-    onItemContextMenu?: (
-      e: DevExpress.common.core.events.NativeEventInfo<
-        TComponent,
-        DevExpress.events.PointerInteractionEvent
-      > &
-        DevExpress.common.core.events.ItemInfo<TItem>
-    ) => void;
+    onItemContextMenu?:
+      | ((
+          e: DevExpress.common.core.events.NativeEventInfo<
+            TComponent,
+            DevExpress.events.PointerInteractionEvent
+          > &
+            DevExpress.common.core.events.ItemInfo<TItem>
+        ) => void)
+      | null;
     /**
      * [descr:CollectionWidgetOptions.onItemHold]
      */
-    onItemHold?: (
-      e: DevExpress.common.core.events.NativeEventInfo<
-        TComponent,
-        DevExpress.events.PointerInteractionEvent
-      > &
-        DevExpress.common.core.events.ItemInfo<TItem>
-    ) => void;
+    onItemHold?:
+      | ((
+          e: DevExpress.common.core.events.NativeEventInfo<
+            TComponent,
+            DevExpress.events.PointerInteractionEvent
+          > &
+            DevExpress.common.core.events.ItemInfo<TItem>
+        ) => void)
+      | null;
     /**
      * [descr:CollectionWidgetOptions.onItemRendered]
      */
-    onItemRendered?: (
-      e: DevExpress.common.core.events.EventInfo<TComponent> &
-        DevExpress.common.core.events.ItemInfo<TItem>
-    ) => void;
+    onItemRendered?:
+      | ((
+          e: DevExpress.common.core.events.EventInfo<TComponent> &
+            DevExpress.common.core.events.ItemInfo<TItem>
+        ) => void)
+      | null;
     /**
      * [descr:CollectionWidgetOptions.onSelectionChanging]
      */
-    onSelectionChanging?: (
-      e: DevExpress.ui.CollectionWidget.SelectionChangingEventBase<TComponent>
-    ) => void;
+    onSelectionChanging?:
+      | ((
+          e: DevExpress.ui.CollectionWidget.SelectionChangingEventBase<TComponent>
+        ) => void)
+      | null;
     /**
      * [descr:CollectionWidgetOptions.onSelectionChanged]
      */
-    onSelectionChanged?: (
-      e: DevExpress.common.core.events.EventInfo<TComponent> &
-        DevExpress.ui.CollectionWidget.SelectionChangeInfo<TItem>
-    ) => void;
+    onSelectionChanged?:
+      | ((
+          e: DevExpress.common.core.events.EventInfo<TComponent> &
+            DevExpress.ui.CollectionWidget.SelectionChangeInfo<TItem>
+        ) => void)
+      | null;
     /**
      * [descr:CollectionWidgetOptions.selectedIndex]
      */
@@ -9138,7 +9151,7 @@ declare module DevExpress.ui {
     /**
      * [descr:CollectionWidgetOptions.selectedItem]
      */
-    selectedItem?: TItem;
+    selectedItem?: TItem | null;
     /**
      * [descr:CollectionWidgetOptions.selectedItemKeys]
      */
@@ -9196,7 +9209,7 @@ declare module DevExpress.ui {
     /**
      * [descr:DataExpressionMixinOptions.value]
      */
-    value?: any;
+    value?: any | null;
     /**
      * [descr:DataExpressionMixinOptions.valueExpr]
      */
@@ -9243,7 +9256,7 @@ declare module DevExpress.ui {
     /**
      * [descr:DateBoxBaseOptions.displayFormat]
      */
-    displayFormat?: DevExpress.common.core.localization.Format;
+    displayFormat?: DevExpress.common.core.localization.Format | null;
     /**
      * [descr:DateBoxBaseOptions.max]
      */
@@ -9564,7 +9577,8 @@ declare module DevExpress.ui {
       | ((
           e: DevExpress.ui.dxAccordion.ItemTitleClickEvent<TItem, TKey>
         ) => void)
-      | string;
+      | string
+      | null;
     /**
      * [descr:dxAccordionOptions.repaintChangesOnly]
      */
@@ -9750,7 +9764,8 @@ declare module DevExpress.ui {
      */
     onCancelClick?:
       | ((e: DevExpress.ui.dxActionSheet.CancelClickEvent<TItem, TKey>) => void)
-      | string;
+      | string
+      | null;
     /**
      * [descr:dxActionSheetOptions.showCancelButton]
      */
@@ -10246,13 +10261,15 @@ declare module DevExpress.ui {
     /**
      * [descr:dxButtonGroupOptions.onItemClick]
      */
-    onItemClick?: (e: DevExpress.ui.dxButtonGroup.ItemClickEvent) => void;
+    onItemClick?:
+      | ((e: DevExpress.ui.dxButtonGroup.ItemClickEvent) => void)
+      | undefined;
     /**
      * [descr:dxButtonGroupOptions.onSelectionChanged]
      */
-    onSelectionChanged?: (
-      e: DevExpress.ui.dxButtonGroup.SelectionChangedEvent
-    ) => void;
+    onSelectionChanged?:
+      | ((e: DevExpress.ui.dxButtonGroup.SelectionChangedEvent) => void)
+      | undefined;
     /**
      * [descr:dxButtonGroupOptions.selectedItemKeys]
      */
@@ -10295,7 +10312,7 @@ declare module DevExpress.ui {
     /**
      * [descr:dxButtonOptions.onClick]
      */
-    onClick?: (e: DevExpress.ui.dxButton.ClickEvent) => void;
+    onClick?: ((e: DevExpress.ui.dxButton.ClickEvent) => void) | undefined;
     /**
      * [descr:dxButtonOptions.stylingMode]
      */
@@ -10418,7 +10435,8 @@ declare module DevExpress.ui {
      */
     disabledDates?:
       | Array<Date>
-      | ((data: DevExpress.ui.dxCalendar.DisabledDate) => boolean);
+      | ((data: DevExpress.ui.dxCalendar.DisabledDate) => boolean)
+      | null;
     /**
      * [descr:dxCalendarOptions.firstDayOfWeek]
      */
@@ -11955,7 +11973,7 @@ declare module DevExpress.ui {
     /**
      * [descr:dxCheckBoxOptions.value]
      */
-    value?: boolean | null | undefined;
+    value?: boolean | null;
   }
   /**
    * [descr:dxColorBox]
@@ -12112,7 +12130,8 @@ declare module DevExpress.ui {
       | ((
           value: string,
           fieldElement: DevExpress.core.DxElement
-        ) => string | DevExpress.core.UserDefinedElement);
+        ) => string | DevExpress.core.UserDefinedElement)
+      | null;
     /**
      * [descr:dxColorBoxOptions.keyStep]
      */
@@ -12324,31 +12343,33 @@ declare module DevExpress.ui {
     /**
      * [descr:dxContextMenuOptions.onHidden]
      */
-    onHidden?: (
-      e: DevExpress.ui.dxContextMenu.HiddenEvent<TItem, TKey>
-    ) => void;
+    onHidden?:
+      | ((e: DevExpress.ui.dxContextMenu.HiddenEvent<TItem, TKey>) => void)
+      | undefined;
     /**
      * [descr:dxContextMenuOptions.onHiding]
      */
-    onHiding?: (
-      e: DevExpress.ui.dxContextMenu.HidingEvent<TItem, TKey>
-    ) => void;
+    onHiding?:
+      | ((e: DevExpress.ui.dxContextMenu.HidingEvent<TItem, TKey>) => void)
+      | undefined;
     /**
      * [descr:dxContextMenuOptions.onPositioning]
      */
-    onPositioning?: (
-      e: DevExpress.ui.dxContextMenu.PositioningEvent<TItem, TKey>
-    ) => void;
+    onPositioning?:
+      | ((e: DevExpress.ui.dxContextMenu.PositioningEvent<TItem, TKey>) => void)
+      | undefined;
     /**
      * [descr:dxContextMenuOptions.onShowing]
      */
-    onShowing?: (
-      e: DevExpress.ui.dxContextMenu.ShowingEvent<TItem, TKey>
-    ) => void;
+    onShowing?:
+      | ((e: DevExpress.ui.dxContextMenu.ShowingEvent<TItem, TKey>) => void)
+      | undefined;
     /**
      * [descr:dxContextMenuOptions.onShown]
      */
-    onShown?: (e: DevExpress.ui.dxContextMenu.ShownEvent<TItem, TKey>) => void;
+    onShown?:
+      | ((e: DevExpress.ui.dxContextMenu.ShownEvent<TItem, TKey>) => void)
+      | undefined;
     /**
      * [descr:dxContextMenuOptions.position]
      */
@@ -14904,7 +14925,8 @@ declare module DevExpress.ui {
      */
     disabledDates?:
       | Array<Date>
-      | ((data: DevExpress.ui.dxDateBox.DisabledDate) => boolean);
+      | ((data: DevExpress.ui.dxDateBox.DisabledDate) => boolean)
+      | null;
     /**
      * [descr:dxDateBoxOptions.inputAttr]
      */
@@ -14924,7 +14946,7 @@ declare module DevExpress.ui {
     /**
      * [descr:dxDateBoxOptions.maxLength]
      */
-    maxLength?: string | number;
+    maxLength?: string | number | null;
     /**
      * [descr:dxDateBoxOptions.name]
      */
@@ -16187,29 +16209,33 @@ declare module DevExpress.ui {
     /**
      * [descr:dxDiagramOptions.onItemClick]
      */
-    onItemClick?: (e: DevExpress.ui.dxDiagram.ItemClickEvent) => void;
+    onItemClick?:
+      | ((e: DevExpress.ui.dxDiagram.ItemClickEvent) => void)
+      | undefined;
     /**
      * [descr:dxDiagramOptions.onItemDblClick]
      */
-    onItemDblClick?: (e: DevExpress.ui.dxDiagram.ItemDblClickEvent) => void;
+    onItemDblClick?:
+      | ((e: DevExpress.ui.dxDiagram.ItemDblClickEvent) => void)
+      | undefined;
     /**
      * [descr:dxDiagramOptions.onSelectionChanged]
      */
-    onSelectionChanged?: (
-      e: DevExpress.ui.dxDiagram.SelectionChangedEvent
-    ) => void;
+    onSelectionChanged?:
+      | ((e: DevExpress.ui.dxDiagram.SelectionChangedEvent) => void)
+      | undefined;
     /**
      * [descr:dxDiagramOptions.onRequestEditOperation]
      */
-    onRequestEditOperation?: (
-      e: DevExpress.ui.dxDiagram.RequestEditOperationEvent
-    ) => void;
+    onRequestEditOperation?:
+      | ((e: DevExpress.ui.dxDiagram.RequestEditOperationEvent) => void)
+      | undefined;
     /**
      * [descr:dxDiagramOptions.onRequestLayoutUpdate]
      */
-    onRequestLayoutUpdate?: (
-      e: DevExpress.ui.dxDiagram.RequestLayoutUpdateEvent
-    ) => void;
+    onRequestLayoutUpdate?:
+      | ((e: DevExpress.ui.dxDiagram.RequestLayoutUpdateEvent) => void)
+      | undefined;
     /**
      * [descr:dxDiagramOptions.pageColor]
      */
@@ -16749,11 +16775,11 @@ declare module DevExpress.ui {
     /**
      * [descr:dxDrawerOptions.maxSize]
      */
-    maxSize?: number;
+    maxSize?: number | null;
     /**
      * [descr:dxDrawerOptions.minSize]
      */
-    minSize?: number;
+    minSize?: number | null;
     /**
      * [descr:dxDrawerOptions.opened]
      */
@@ -16941,7 +16967,8 @@ declare module DevExpress.ui {
       | ((
           value: any,
           fieldElement: DevExpress.core.DxElement
-        ) => string | DevExpress.core.UserDefinedElement);
+        ) => string | DevExpress.core.UserDefinedElement)
+      | null;
     /**
      * [descr:dxDropDownBoxOptions.items]
      */
@@ -17280,10 +17307,12 @@ declare module DevExpress.ui {
     /**
      * [descr:dxDropDownEditorOptions.buttons]
      */
-    buttons?: Array<
-      | DevExpress.ui.dxDropDownEditor.DropDownPredefinedButton
-      | DevExpress.common.TextEditorButton
-    >;
+    buttons?:
+      | Array<
+          | DevExpress.ui.dxDropDownEditor.DropDownPredefinedButton
+          | DevExpress.common.TextEditorButton
+        >
+      | undefined;
     /**
      * [descr:dxDropDownEditorOptions.deferRendering]
      */
@@ -17304,11 +17333,15 @@ declare module DevExpress.ui {
     /**
      * [descr:dxDropDownEditorOptions.onClosed]
      */
-    onClosed?: (e: DevExpress.common.core.events.EventInfo<TComponent>) => void;
+    onClosed?:
+      | ((e: DevExpress.common.core.events.EventInfo<TComponent>) => void)
+      | null;
     /**
      * [descr:dxDropDownEditorOptions.onOpened]
      */
-    onOpened?: (e: DevExpress.common.core.events.EventInfo<TComponent>) => void;
+    onOpened?:
+      | ((e: DevExpress.common.core.events.EventInfo<TComponent>) => void)
+      | null;
     /**
      * [descr:dxDropDownEditorOptions.openOnFieldClick]
      */
@@ -17330,7 +17363,7 @@ declare module DevExpress.ui {
     /**
      * [descr:dxDropDownEditorOptions.value]
      */
-    value?: any;
+    value?: any | null;
   }
   /**
    * [descr:dxDropDownList]
@@ -17399,20 +17432,24 @@ declare module DevExpress.ui {
     /**
      * [descr:dxDropDownListOptions.onSelectionChanged]
      */
-    onSelectionChanged?: (
-      e: DevExpress.common.core.events.EventInfo<TComponent> &
-        DevExpress.ui.dxDropDownList.SelectionChangedInfo
-    ) => void;
+    onSelectionChanged?:
+      | ((
+          e: DevExpress.common.core.events.EventInfo<TComponent> &
+            DevExpress.ui.dxDropDownList.SelectionChangedInfo
+        ) => void)
+      | null;
     /**
      * [descr:dxDropDownListOptions.onValueChanged]
      */
-    onValueChanged?: (
-      e: DevExpress.common.core.events.NativeEventInfo<
-        TComponent,
-        KeyboardEvent | MouseEvent | PointerEvent | Event
-      > &
-        DevExpress.ui.Editor.ValueChangedInfo
-    ) => void;
+    onValueChanged?:
+      | ((
+          e: DevExpress.common.core.events.NativeEventInfo<
+            TComponent,
+            KeyboardEvent | MouseEvent | PointerEvent | Event
+          > &
+            DevExpress.ui.Editor.ValueChangedInfo
+        ) => void)
+      | null;
     /**
      * [descr:dxDropDownListOptions.searchEnabled]
      */
@@ -17420,7 +17457,7 @@ declare module DevExpress.ui {
     /**
      * [descr:dxDropDownListOptions.searchExpr]
      */
-    searchExpr?: string | Function | Array<string | Function>;
+    searchExpr?: string | Function | Array<string | Function> | null;
     /**
      * [descr:dxDropDownListOptions.searchMode]
      */
@@ -17432,7 +17469,7 @@ declare module DevExpress.ui {
     /**
      * [descr:dxDropDownListOptions.selectedItem]
      */
-    selectedItem?: any;
+    selectedItem?: any | null;
     /**
      * [descr:dxDropDownListOptions.showDataBeforeSearch]
      */
@@ -18007,7 +18044,7 @@ declare module DevExpress.ui {
     /**
      * [descr:dxFileManagerOptions.fileSystemProvider]
      */
-    fileSystemProvider?: any;
+    fileSystemProvider?: any | null;
     /**
      * [descr:dxFileManagerOptions.itemView]
      */
@@ -18050,33 +18087,33 @@ declare module DevExpress.ui {
     /**
      * [descr:dxFileManagerOptions.onContextMenuItemClick]
      */
-    onContextMenuItemClick?: (
-      e: DevExpress.ui.dxFileManager.ContextMenuItemClickEvent
-    ) => void;
+    onContextMenuItemClick?:
+      | ((e: DevExpress.ui.dxFileManager.ContextMenuItemClickEvent) => void)
+      | undefined;
     /**
      * [descr:dxFileManagerOptions.onContextMenuShowing]
      */
-    onContextMenuShowing?: (
-      e: DevExpress.ui.dxFileManager.ContextMenuShowingEvent
-    ) => void;
+    onContextMenuShowing?:
+      | ((e: DevExpress.ui.dxFileManager.ContextMenuShowingEvent) => void)
+      | undefined;
     /**
      * [descr:dxFileManagerOptions.onCurrentDirectoryChanged]
      */
-    onCurrentDirectoryChanged?: (
-      e: DevExpress.ui.dxFileManager.CurrentDirectoryChangedEvent
-    ) => void;
+    onCurrentDirectoryChanged?:
+      | ((e: DevExpress.ui.dxFileManager.CurrentDirectoryChangedEvent) => void)
+      | undefined;
     /**
      * [descr:dxFileManagerOptions.onSelectedFileOpened]
      */
-    onSelectedFileOpened?: (
-      e: DevExpress.ui.dxFileManager.SelectedFileOpenedEvent
-    ) => void;
+    onSelectedFileOpened?:
+      | ((e: DevExpress.ui.dxFileManager.SelectedFileOpenedEvent) => void)
+      | undefined;
     /**
      * [descr:dxFileManagerOptions.onSelectionChanged]
      */
-    onSelectionChanged?: (
-      e: DevExpress.ui.dxFileManager.SelectionChangedEvent
-    ) => void;
+    onSelectionChanged?:
+      | ((e: DevExpress.ui.dxFileManager.SelectionChangedEvent) => void)
+      | undefined;
     /**
      * [descr:dxFileManagerOptions.onToolbarItemClick]
      */
@@ -18086,75 +18123,93 @@ declare module DevExpress.ui {
     /**
      * [descr:dxFileManagerOptions.onFocusedItemChanged]
      */
-    onFocusedItemChanged?: (
-      e: DevExpress.ui.dxFileManager.FocusedItemChangedEvent
-    ) => void;
+    onFocusedItemChanged?:
+      | ((e: DevExpress.ui.dxFileManager.FocusedItemChangedEvent) => void)
+      | undefined;
     /**
      * [descr:dxFileManagerOptions.onErrorOccurred]
      */
-    onErrorOccurred?: (
-      e: DevExpress.ui.dxFileManager.ErrorOccurredEvent
-    ) => void;
+    onErrorOccurred?:
+      | ((e: DevExpress.ui.dxFileManager.ErrorOccurredEvent) => void)
+      | undefined;
     /**
      * [descr:dxFileManagerOptions.onDirectoryCreating]
      */
-    onDirectoryCreating?: (
-      e: DevExpress.ui.dxFileManager.DirectoryCreatingEvent
-    ) => void;
+    onDirectoryCreating?:
+      | ((e: DevExpress.ui.dxFileManager.DirectoryCreatingEvent) => void)
+      | undefined;
     /**
      * [descr:dxFileManagerOptions.onDirectoryCreated]
      */
-    onDirectoryCreated?: (
-      e: DevExpress.ui.dxFileManager.DirectoryCreatedEvent
-    ) => void;
+    onDirectoryCreated?:
+      | ((e: DevExpress.ui.dxFileManager.DirectoryCreatedEvent) => void)
+      | undefined;
     /**
      * [descr:dxFileManagerOptions.onItemRenaming]
      */
-    onItemRenaming?: (e: DevExpress.ui.dxFileManager.ItemRenamingEvent) => void;
+    onItemRenaming?:
+      | ((e: DevExpress.ui.dxFileManager.ItemRenamingEvent) => void)
+      | undefined;
     /**
      * [descr:dxFileManagerOptions.onItemRenamed]
      */
-    onItemRenamed?: (e: DevExpress.ui.dxFileManager.ItemRenamedEvent) => void;
+    onItemRenamed?:
+      | ((e: DevExpress.ui.dxFileManager.ItemRenamedEvent) => void)
+      | undefined;
     /**
      * [descr:dxFileManagerOptions.onItemMoving]
      */
-    onItemMoving?: (e: DevExpress.ui.dxFileManager.ItemMovingEvent) => void;
+    onItemMoving?:
+      | ((e: DevExpress.ui.dxFileManager.ItemMovingEvent) => void)
+      | undefined;
     /**
      * [descr:dxFileManagerOptions.onItemMoved]
      */
-    onItemMoved?: (e: DevExpress.ui.dxFileManager.ItemMovedEvent) => void;
+    onItemMoved?:
+      | ((e: DevExpress.ui.dxFileManager.ItemMovedEvent) => void)
+      | undefined;
     /**
      * [descr:dxFileManagerOptions.onItemCopying]
      */
-    onItemCopying?: (e: DevExpress.ui.dxFileManager.ItemCopyingEvent) => void;
+    onItemCopying?:
+      | ((e: DevExpress.ui.dxFileManager.ItemCopyingEvent) => void)
+      | undefined;
     /**
      * [descr:dxFileManagerOptions.onItemCopied]
      */
-    onItemCopied?: (e: DevExpress.ui.dxFileManager.ItemCopiedEvent) => void;
+    onItemCopied?:
+      | ((e: DevExpress.ui.dxFileManager.ItemCopiedEvent) => void)
+      | undefined;
     /**
      * [descr:dxFileManagerOptions.onItemDeleting]
      */
-    onItemDeleting?: (e: DevExpress.ui.dxFileManager.ItemDeletingEvent) => void;
+    onItemDeleting?:
+      | ((e: DevExpress.ui.dxFileManager.ItemDeletingEvent) => void)
+      | undefined;
     /**
      * [descr:dxFileManagerOptions.onItemDeleted]
      */
-    onItemDeleted?: (e: DevExpress.ui.dxFileManager.ItemDeletedEvent) => void;
+    onItemDeleted?:
+      | ((e: DevExpress.ui.dxFileManager.ItemDeletedEvent) => void)
+      | undefined;
     /**
      * [descr:dxFileManagerOptions.onFileUploading]
      */
-    onFileUploading?: (
-      e: DevExpress.ui.dxFileManager.FileUploadingEvent
-    ) => void;
+    onFileUploading?:
+      | ((e: DevExpress.ui.dxFileManager.FileUploadingEvent) => void)
+      | undefined;
     /**
      * [descr:dxFileManagerOptions.onFileUploaded]
      */
-    onFileUploaded?: (e: DevExpress.ui.dxFileManager.FileUploadedEvent) => void;
+    onFileUploaded?:
+      | ((e: DevExpress.ui.dxFileManager.FileUploadedEvent) => void)
+      | undefined;
     /**
      * [descr:dxFileManagerOptions.onItemDownloading]
      */
-    onItemDownloading?: (
-      e: DevExpress.ui.dxFileManager.ItemDownloadingEvent
-    ) => void;
+    onItemDownloading?:
+      | ((e: DevExpress.ui.dxFileManager.ItemDownloadingEvent) => void)
+      | undefined;
     /**
      * [descr:dxFileManagerOptions.permissions]
      */
@@ -18203,7 +18258,7 @@ declare module DevExpress.ui {
     /**
      * [descr:dxFileManagerOptions.focusedItemKey]
      */
-    focusedItemKey?: string;
+    focusedItemKey?: string | undefined;
     /**
      * [descr:dxFileManagerOptions.toolbar]
      */
@@ -18585,55 +18640,63 @@ declare module DevExpress.ui {
     /**
      * [descr:dxFileUploaderOptions.onBeforeSend]
      */
-    onBeforeSend?: (e: DevExpress.ui.dxFileUploader.BeforeSendEvent) => void;
+    onBeforeSend?:
+      | ((e: DevExpress.ui.dxFileUploader.BeforeSendEvent) => void)
+      | undefined;
     /**
      * [descr:dxFileUploaderOptions.onDropZoneEnter]
      */
-    onDropZoneEnter?: (
-      e: DevExpress.ui.dxFileUploader.DropZoneEnterEvent
-    ) => void;
+    onDropZoneEnter?:
+      | ((e: DevExpress.ui.dxFileUploader.DropZoneEnterEvent) => void)
+      | undefined;
     /**
      * [descr:dxFileUploaderOptions.onDropZoneLeave]
      */
-    onDropZoneLeave?: (
-      e: DevExpress.ui.dxFileUploader.DropZoneLeaveEvent
-    ) => void;
+    onDropZoneLeave?:
+      | ((e: DevExpress.ui.dxFileUploader.DropZoneLeaveEvent) => void)
+      | undefined;
     /**
      * [descr:dxFileUploaderOptions.onFilesUploaded]
      */
-    onFilesUploaded?: (
-      e: DevExpress.ui.dxFileUploader.FilesUploadedEvent
-    ) => void;
+    onFilesUploaded?:
+      | ((e: DevExpress.ui.dxFileUploader.FilesUploadedEvent) => void)
+      | undefined;
     /**
      * [descr:dxFileUploaderOptions.onProgress]
      */
-    onProgress?: (e: DevExpress.ui.dxFileUploader.ProgressEvent) => void;
+    onProgress?:
+      | ((e: DevExpress.ui.dxFileUploader.ProgressEvent) => void)
+      | undefined;
     /**
      * [descr:dxFileUploaderOptions.onUploadAborted]
      */
-    onUploadAborted?: (
-      e: DevExpress.ui.dxFileUploader.UploadAbortedEvent
-    ) => void;
+    onUploadAborted?:
+      | ((e: DevExpress.ui.dxFileUploader.UploadAbortedEvent) => void)
+      | undefined;
     /**
      * [descr:dxFileUploaderOptions.onUploadError]
      */
-    onUploadError?: (e: DevExpress.ui.dxFileUploader.UploadErrorEvent) => void;
+    onUploadError?:
+      | ((e: DevExpress.ui.dxFileUploader.UploadErrorEvent) => void)
+      | undefined;
     /**
      * [descr:dxFileUploaderOptions.onUploadStarted]
      */
-    onUploadStarted?: (
-      e: DevExpress.ui.dxFileUploader.UploadStartedEvent
-    ) => void;
+    onUploadStarted?:
+      | ((e: DevExpress.ui.dxFileUploader.UploadStartedEvent) => void)
+      | undefined;
     /**
      * [descr:dxFileUploaderOptions.onUploaded]
      */
-    onUploaded?: (e: DevExpress.ui.dxFileUploader.UploadedEvent) => void;
+    onUploaded?:
+      | ((e: DevExpress.ui.dxFileUploader.UploadedEvent) => void)
+      | undefined;
     /**
      * [descr:dxFileUploaderOptions.onValueChanged]
      */
-    onValueChanged?: (
-      e: DevExpress.ui.dxFileUploader.ValueChangedEvent
-    ) => void;
+    onValueChanged?:
+      | ((e: DevExpress.ui.dxFileUploader.ValueChangedEvent) => void)
+      | undefined;
     /**
      * [descr:dxFileUploaderOptions.progress]
      */
@@ -19559,21 +19622,27 @@ declare module DevExpress.ui {
     /**
      * [descr:dxFormOptions.onEditorEnterKey]
      */
-    onEditorEnterKey?: (e: DevExpress.ui.dxForm.EditorEnterKeyEvent) => void;
+    onEditorEnterKey?:
+      | ((e: DevExpress.ui.dxForm.EditorEnterKeyEvent) => void)
+      | undefined;
     /**
      * [descr:dxFormOptions.onFieldDataChanged]
      */
-    onFieldDataChanged?: (
-      e: DevExpress.ui.dxForm.FieldDataChangedEvent
-    ) => void;
+    onFieldDataChanged?:
+      | ((e: DevExpress.ui.dxForm.FieldDataChangedEvent) => void)
+      | undefined;
     /**
      * [descr:dxFormOptions.onSmartPasting]
      */
-    onSmartPasting?: (e: DevExpress.ui.dxForm.SmartPastingEvent) => void;
+    onSmartPasting?:
+      | ((e: DevExpress.ui.dxForm.SmartPastingEvent) => void)
+      | undefined;
     /**
      * [descr:dxFormOptions.onSmartPasted]
      */
-    onSmartPasted?: (e: DevExpress.ui.dxForm.SmartPastedEvent) => void;
+    onSmartPasted?:
+      | ((e: DevExpress.ui.dxForm.SmartPastedEvent) => void)
+      | undefined;
     /**
      * [descr:dxFormOptions.optionalMark]
      */
@@ -21140,143 +21209,165 @@ declare module DevExpress.ui {
     /**
      * [descr:dxGanttOptions.onSelectionChanged]
      */
-    onSelectionChanged?: (
-      e: DevExpress.ui.dxGantt.SelectionChangedEvent
-    ) => void;
+    onSelectionChanged?:
+      | ((e: DevExpress.ui.dxGantt.SelectionChangedEvent) => void)
+      | undefined;
     /**
      * [descr:dxGanttOptions.onCustomCommand]
      */
-    onCustomCommand?: (e: DevExpress.ui.dxGantt.CustomCommandEvent) => void;
+    onCustomCommand?:
+      | ((e: DevExpress.ui.dxGantt.CustomCommandEvent) => void)
+      | undefined;
     /**
      * [descr:dxGanttOptions.onContextMenuPreparing]
      */
-    onContextMenuPreparing?: (
-      e: DevExpress.ui.dxGantt.ContextMenuPreparingEvent
-    ) => void;
+    onContextMenuPreparing?:
+      | ((e: DevExpress.ui.dxGantt.ContextMenuPreparingEvent) => void)
+      | undefined;
     /**
      * [descr:dxGanttOptions.onTaskInserting]
      */
-    onTaskInserting?: (e: DevExpress.ui.dxGantt.TaskInsertingEvent) => void;
+    onTaskInserting?:
+      | ((e: DevExpress.ui.dxGantt.TaskInsertingEvent) => void)
+      | undefined;
     /**
      * [descr:dxGanttOptions.onTaskInserted]
      */
-    onTaskInserted?: (e: DevExpress.ui.dxGantt.TaskInsertedEvent) => void;
+    onTaskInserted?:
+      | ((e: DevExpress.ui.dxGantt.TaskInsertedEvent) => void)
+      | undefined;
     /**
      * [descr:dxGanttOptions.onTaskDeleting]
      */
-    onTaskDeleting?: (e: DevExpress.ui.dxGantt.TaskDeletingEvent) => void;
+    onTaskDeleting?:
+      | ((e: DevExpress.ui.dxGantt.TaskDeletingEvent) => void)
+      | undefined;
     /**
      * [descr:dxGanttOptions.onTaskDeleted]
      */
-    onTaskDeleted?: (e: DevExpress.ui.dxGantt.TaskDeletedEvent) => void;
+    onTaskDeleted?:
+      | ((e: DevExpress.ui.dxGantt.TaskDeletedEvent) => void)
+      | undefined;
     /**
      * [descr:dxGanttOptions.onTaskUpdating]
      */
-    onTaskUpdating?: (e: DevExpress.ui.dxGantt.TaskUpdatingEvent) => void;
+    onTaskUpdating?:
+      | ((e: DevExpress.ui.dxGantt.TaskUpdatingEvent) => void)
+      | undefined;
     /**
      * [descr:dxGanttOptions.onTaskUpdated]
      */
-    onTaskUpdated?: (e: DevExpress.ui.dxGantt.TaskUpdatedEvent) => void;
+    onTaskUpdated?:
+      | ((e: DevExpress.ui.dxGantt.TaskUpdatedEvent) => void)
+      | undefined;
     /**
      * [descr:dxGanttOptions.onTaskMoving]
      */
-    onTaskMoving?: (e: DevExpress.ui.dxGantt.TaskMovingEvent) => void;
+    onTaskMoving?:
+      | ((e: DevExpress.ui.dxGantt.TaskMovingEvent) => void)
+      | undefined;
     /**
      * [descr:dxGanttOptions.onTaskEditDialogShowing]
      */
-    onTaskEditDialogShowing?: (
-      e: DevExpress.ui.dxGantt.TaskEditDialogShowingEvent
-    ) => void;
+    onTaskEditDialogShowing?:
+      | ((e: DevExpress.ui.dxGantt.TaskEditDialogShowingEvent) => void)
+      | undefined;
     /**
      * [descr:dxGanttOptions.onResourceManagerDialogShowing]
      */
-    onResourceManagerDialogShowing?: (
-      e: DevExpress.ui.dxGantt.ResourceManagerDialogShowingEvent
-    ) => void;
+    onResourceManagerDialogShowing?:
+      | ((e: DevExpress.ui.dxGantt.ResourceManagerDialogShowingEvent) => void)
+      | undefined;
     /**
      * [descr:dxGanttOptions.onDependencyInserting]
      */
-    onDependencyInserting?: (
-      e: DevExpress.ui.dxGantt.DependencyInsertingEvent
-    ) => void;
+    onDependencyInserting?:
+      | ((e: DevExpress.ui.dxGantt.DependencyInsertingEvent) => void)
+      | undefined;
     /**
      * [descr:dxGanttOptions.onDependencyInserted]
      */
-    onDependencyInserted?: (
-      e: DevExpress.ui.dxGantt.DependencyInsertedEvent
-    ) => void;
+    onDependencyInserted?:
+      | ((e: DevExpress.ui.dxGantt.DependencyInsertedEvent) => void)
+      | undefined;
     /**
      * [descr:dxGanttOptions.onDependencyDeleting]
      */
-    onDependencyDeleting?: (
-      e: DevExpress.ui.dxGantt.DependencyDeletingEvent
-    ) => void;
+    onDependencyDeleting?:
+      | ((e: DevExpress.ui.dxGantt.DependencyDeletingEvent) => void)
+      | undefined;
     /**
      * [descr:dxGanttOptions.onDependencyDeleted]
      */
-    onDependencyDeleted?: (
-      e: DevExpress.ui.dxGantt.DependencyDeletedEvent
-    ) => void;
+    onDependencyDeleted?:
+      | ((e: DevExpress.ui.dxGantt.DependencyDeletedEvent) => void)
+      | undefined;
     /**
      * [descr:dxGanttOptions.onResourceInserting]
      */
-    onResourceInserting?: (
-      e: DevExpress.ui.dxGantt.ResourceInsertingEvent
-    ) => void;
+    onResourceInserting?:
+      | ((e: DevExpress.ui.dxGantt.ResourceInsertingEvent) => void)
+      | undefined;
     /**
      * [descr:dxGanttOptions.onResourceInserted]
      */
-    onResourceInserted?: (
-      e: DevExpress.ui.dxGantt.ResourceInsertedEvent
-    ) => void;
+    onResourceInserted?:
+      | ((e: DevExpress.ui.dxGantt.ResourceInsertedEvent) => void)
+      | undefined;
     /**
      * [descr:dxGanttOptions.onResourceDeleting]
      */
-    onResourceDeleting?: (
-      e: DevExpress.ui.dxGantt.ResourceDeletingEvent
-    ) => void;
+    onResourceDeleting?:
+      | ((e: DevExpress.ui.dxGantt.ResourceDeletingEvent) => void)
+      | undefined;
     /**
      * [descr:dxGanttOptions.onResourceDeleted]
      */
-    onResourceDeleted?: (e: DevExpress.ui.dxGantt.ResourceDeletedEvent) => void;
+    onResourceDeleted?:
+      | ((e: DevExpress.ui.dxGantt.ResourceDeletedEvent) => void)
+      | undefined;
     /**
      * [descr:dxGanttOptions.onResourceAssigning]
      */
-    onResourceAssigning?: (
-      e: DevExpress.ui.dxGantt.ResourceAssigningEvent
-    ) => void;
+    onResourceAssigning?:
+      | ((e: DevExpress.ui.dxGantt.ResourceAssigningEvent) => void)
+      | undefined;
     /**
      * [descr:dxGanttOptions.onResourceAssigned]
      */
-    onResourceAssigned?: (
-      e: DevExpress.ui.dxGantt.ResourceAssignedEvent
-    ) => void;
+    onResourceAssigned?:
+      | ((e: DevExpress.ui.dxGantt.ResourceAssignedEvent) => void)
+      | undefined;
     /**
      * [descr:dxGanttOptions.onResourceUnassigning]
      */
-    onResourceUnassigning?: (
-      e: DevExpress.ui.dxGantt.ResourceUnassigningEvent
-    ) => void;
+    onResourceUnassigning?:
+      | ((e: DevExpress.ui.dxGantt.ResourceUnassigningEvent) => void)
+      | undefined;
     /**
      * [descr:dxGanttOptions.onResourceUnassigned]
      */
-    onResourceUnassigned?: (
-      e: DevExpress.ui.dxGantt.ResourceUnassignedEvent
-    ) => void;
+    onResourceUnassigned?:
+      | ((e: DevExpress.ui.dxGantt.ResourceUnassignedEvent) => void)
+      | undefined;
     /**
      * [descr:dxGanttOptions.onTaskClick]
      */
-    onTaskClick?: (e: DevExpress.ui.dxGantt.TaskClickEvent) => void;
+    onTaskClick?:
+      | ((e: DevExpress.ui.dxGantt.TaskClickEvent) => void)
+      | undefined;
     /**
      * [descr:dxGanttOptions.onTaskDblClick]
      */
-    onTaskDblClick?: (e: DevExpress.ui.dxGantt.TaskDblClickEvent) => void;
+    onTaskDblClick?:
+      | ((e: DevExpress.ui.dxGantt.TaskDblClickEvent) => void)
+      | undefined;
     /**
      * [descr:dxGanttOptions.onScaleCellPrepared]
      */
-    onScaleCellPrepared?: (
-      e: DevExpress.ui.dxGantt.ScaleCellPreparedEvent
-    ) => void;
+    onScaleCellPrepared?:
+      | ((e: DevExpress.ui.dxGantt.ScaleCellPreparedEvent) => void)
+      | undefined;
 
     /**
      * [descr:dxGanttOptions.resourceAssignments]
@@ -21457,11 +21548,11 @@ declare module DevExpress.ui {
     /**
      * [descr:dxGanttOptions.startDateRange]
      */
-    startDateRange?: Date;
+    startDateRange?: Date | undefined;
     /**
      * [descr:dxGanttOptions.endDateRange]
      */
-    endDateRange?: Date;
+    endDateRange?: Date | undefined;
   }
   /**
    * [descr:dxGanttSorting]
@@ -21985,19 +22076,19 @@ declare module DevExpress.ui {
     /**
      * [descr:dxHtmlEditorOptions.mediaResizing]
      */
-    mediaResizing?: dxHtmlEditorMediaResizing;
+    mediaResizing?: dxHtmlEditorMediaResizing | null;
     /**
      * [descr:dxHtmlEditorOptions.tableResizing]
      */
-    tableResizing?: dxHtmlEditorTableResizing;
+    tableResizing?: dxHtmlEditorTableResizing | null;
     /**
      * [descr:dxHtmlEditorOptions.mentions]
      */
-    mentions?: Array<dxHtmlEditorMention>;
+    mentions?: Array<dxHtmlEditorMention> | null;
     /**
      * [descr:dxHtmlEditorOptions.tableContextMenu]
      */
-    tableContextMenu?: dxHtmlEditorTableContextMenu;
+    tableContextMenu?: dxHtmlEditorTableContextMenu | null;
     /**
      * [descr:dxHtmlEditorOptions.imageUpload]
      */
@@ -22009,11 +22100,15 @@ declare module DevExpress.ui {
     /**
      * [descr:dxHtmlEditorOptions.onFocusIn]
      */
-    onFocusIn?: (e: DevExpress.ui.dxHtmlEditor.FocusInEvent) => void;
+    onFocusIn?:
+      | ((e: DevExpress.ui.dxHtmlEditor.FocusInEvent) => void)
+      | undefined;
     /**
      * [descr:dxHtmlEditorOptions.onFocusOut]
      */
-    onFocusOut?: (e: DevExpress.ui.dxHtmlEditor.FocusOutEvent) => void;
+    onFocusOut?:
+      | ((e: DevExpress.ui.dxHtmlEditor.FocusOutEvent) => void)
+      | undefined;
     /**
      * [descr:dxHtmlEditorOptions.placeholder]
      */
@@ -22021,11 +22116,11 @@ declare module DevExpress.ui {
     /**
      * [descr:dxHtmlEditorOptions.toolbar]
      */
-    toolbar?: dxHtmlEditorToolbar;
+    toolbar?: dxHtmlEditorToolbar | null;
     /**
      * [descr:dxHtmlEditorOptions.variables]
      */
-    variables?: dxHtmlEditorVariables;
+    variables?: dxHtmlEditorVariables | null;
     /**
      * [descr:dxHtmlEditorOptions.stylingMode]
      */
@@ -22649,69 +22744,78 @@ declare module DevExpress.ui {
     /**
      * [descr:dxListOptions.onGroupRendered]
      */
-    onGroupRendered?: (
-      e: DevExpress.ui.dxList.GroupRenderedEvent<TItem, TKey>
-    ) => void;
+    onGroupRendered?:
+      | ((e: DevExpress.ui.dxList.GroupRenderedEvent<TItem, TKey>) => void)
+      | undefined;
     /**
      * [descr:dxListOptions.onItemClick]
      */
     onItemClick?:
       | ((e: DevExpress.ui.dxList.ItemClickEvent<TItem, TKey>) => void)
-      | string;
+      | string
+      | null;
     /**
      * [descr:dxListOptions.onItemContextMenu]
      */
-    onItemContextMenu?: (
-      e: DevExpress.ui.dxList.ItemContextMenuEvent<TItem, TKey>
-    ) => void;
+    onItemContextMenu?:
+      | ((e: DevExpress.ui.dxList.ItemContextMenuEvent<TItem, TKey>) => void)
+      | undefined;
     /**
      * [descr:dxListOptions.onItemDeleted]
      */
-    onItemDeleted?: (
-      e: DevExpress.ui.dxList.ItemDeletedEvent<TItem, TKey>
-    ) => void;
+    onItemDeleted?:
+      | ((e: DevExpress.ui.dxList.ItemDeletedEvent<TItem, TKey>) => void)
+      | undefined;
     /**
      * [descr:dxListOptions.onItemDeleting]
      */
-    onItemDeleting?: (
-      e: DevExpress.ui.dxList.ItemDeletingEvent<TItem, TKey>
-    ) => void;
+    onItemDeleting?:
+      | ((e: DevExpress.ui.dxList.ItemDeletingEvent<TItem, TKey>) => void)
+      | undefined;
     /**
      * [descr:dxListOptions.onItemHold]
      */
-    onItemHold?: (e: DevExpress.ui.dxList.ItemHoldEvent<TItem, TKey>) => void;
+    onItemHold?:
+      | ((e: DevExpress.ui.dxList.ItemHoldEvent<TItem, TKey>) => void)
+      | undefined;
     /**
      * [descr:dxListOptions.onItemReordered]
      */
-    onItemReordered?: (
-      e: DevExpress.ui.dxList.ItemReorderedEvent<TItem, TKey>
-    ) => void;
+    onItemReordered?:
+      | ((e: DevExpress.ui.dxList.ItemReorderedEvent<TItem, TKey>) => void)
+      | undefined;
     /**
      * [descr:dxListOptions.onItemSwipe]
      */
-    onItemSwipe?: (e: DevExpress.ui.dxList.ItemSwipeEvent<TItem, TKey>) => void;
+    onItemSwipe?:
+      | ((e: DevExpress.ui.dxList.ItemSwipeEvent<TItem, TKey>) => void)
+      | undefined;
     /**
      * [descr:dxListOptions.onPageLoading]
      */
-    onPageLoading?: (
-      e: DevExpress.ui.dxList.PageLoadingEvent<TItem, TKey>
-    ) => void;
+    onPageLoading?:
+      | ((e: DevExpress.ui.dxList.PageLoadingEvent<TItem, TKey>) => void)
+      | undefined;
     /**
      * [descr:dxListOptions.onPullRefresh]
      */
-    onPullRefresh?: (
-      e: DevExpress.ui.dxList.PullRefreshEvent<TItem, TKey>
-    ) => void;
+    onPullRefresh?:
+      | ((e: DevExpress.ui.dxList.PullRefreshEvent<TItem, TKey>) => void)
+      | undefined;
     /**
      * [descr:dxListOptions.onScroll]
      */
-    onScroll?: (e: DevExpress.ui.dxList.ScrollEvent<TItem, TKey>) => void;
+    onScroll?:
+      | ((e: DevExpress.ui.dxList.ScrollEvent<TItem, TKey>) => void)
+      | undefined;
     /**
      * [descr:dxListOptions.onSelectAllValueChanged]
      */
-    onSelectAllValueChanged?: (
-      e: DevExpress.ui.dxList.SelectAllValueChangedEvent<TItem, TKey>
-    ) => void;
+    onSelectAllValueChanged?:
+      | ((
+          e: DevExpress.ui.dxList.SelectAllValueChangedEvent<TItem, TKey>
+        ) => void)
+      | undefined;
     /**
      * [descr:dxListOptions.pageLoadMode]
      */
@@ -23094,7 +23198,8 @@ declare module DevExpress.ui {
       | ((
           selectedItem: any,
           fieldElement: DevExpress.core.DxElement
-        ) => string | DevExpress.core.UserDefinedElement);
+        ) => string | DevExpress.core.UserDefinedElement)
+      | null;
     /**
      * [descr:dxLookupOptions.focusStateEnabled]
      */
@@ -23120,19 +23225,25 @@ declare module DevExpress.ui {
     /**
      * [descr:dxLookupOptions.onPageLoading]
      */
-    onPageLoading?: (e: DevExpress.ui.dxLookup.PageLoadingEvent) => void;
+    onPageLoading?:
+      | ((e: DevExpress.ui.dxLookup.PageLoadingEvent) => void)
+      | undefined;
     /**
      * [descr:dxLookupOptions.onPullRefresh]
      */
-    onPullRefresh?: (e: DevExpress.ui.dxLookup.PullRefreshEvent) => void;
+    onPullRefresh?:
+      | ((e: DevExpress.ui.dxLookup.PullRefreshEvent) => void)
+      | undefined;
     /**
      * [descr:dxLookupOptions.onScroll]
      */
-    onScroll?: (e: DevExpress.ui.dxLookup.ScrollEvent) => void;
+    onScroll?: ((e: DevExpress.ui.dxLookup.ScrollEvent) => void) | undefined;
     /**
      * [descr:dxLookupOptions.onValueChanged]
      */
-    onValueChanged?: (e: DevExpress.ui.dxLookup.ValueChangedEvent) => void;
+    onValueChanged?:
+      | ((e: DevExpress.ui.dxLookup.ValueChangedEvent) => void)
+      | undefined;
     /**
      * [descr:dxLookupOptions.pageLoadMode]
      */
@@ -23404,27 +23515,35 @@ declare module DevExpress.ui {
     /**
      * [descr:dxMapOptions.onClick]
      */
-    onClick?: ((e: DevExpress.ui.dxMap.ClickEvent) => void) | string;
+    onClick?: ((e: DevExpress.ui.dxMap.ClickEvent) => void) | string | null;
     /**
      * [descr:dxMapOptions.onMarkerAdded]
      */
-    onMarkerAdded?: (e: DevExpress.ui.dxMap.MarkerAddedEvent) => void;
+    onMarkerAdded?:
+      | ((e: DevExpress.ui.dxMap.MarkerAddedEvent) => void)
+      | undefined;
     /**
      * [descr:dxMapOptions.onMarkerRemoved]
      */
-    onMarkerRemoved?: (e: DevExpress.ui.dxMap.MarkerRemovedEvent) => void;
+    onMarkerRemoved?:
+      | ((e: DevExpress.ui.dxMap.MarkerRemovedEvent) => void)
+      | undefined;
     /**
      * [descr:dxMapOptions.onReady]
      */
-    onReady?: (e: DevExpress.ui.dxMap.ReadyEvent) => void;
+    onReady?: ((e: DevExpress.ui.dxMap.ReadyEvent) => void) | undefined;
     /**
      * [descr:dxMapOptions.onRouteAdded]
      */
-    onRouteAdded?: (e: DevExpress.ui.dxMap.RouteAddedEvent) => void;
+    onRouteAdded?:
+      | ((e: DevExpress.ui.dxMap.RouteAddedEvent) => void)
+      | undefined;
     /**
      * [descr:dxMapOptions.onRouteRemoved]
      */
-    onRouteRemoved?: (e: DevExpress.ui.dxMap.RouteRemovedEvent) => void;
+    onRouteRemoved?:
+      | ((e: DevExpress.ui.dxMap.RouteRemovedEvent) => void)
+      | undefined;
     /**
      * [descr:dxMapOptions.provider]
      */
@@ -23855,27 +23974,27 @@ declare module DevExpress.ui {
     /**
      * [descr:dxMenuOptions.onSubmenuHidden]
      */
-    onSubmenuHidden?: (
-      e: DevExpress.ui.dxMenu.SubmenuHiddenEvent<TItem, TKey>
-    ) => void;
+    onSubmenuHidden?:
+      | ((e: DevExpress.ui.dxMenu.SubmenuHiddenEvent<TItem, TKey>) => void)
+      | undefined;
     /**
      * [descr:dxMenuOptions.onSubmenuHiding]
      */
-    onSubmenuHiding?: (
-      e: DevExpress.ui.dxMenu.SubmenuHidingEvent<TItem, TKey>
-    ) => void;
+    onSubmenuHiding?:
+      | ((e: DevExpress.ui.dxMenu.SubmenuHidingEvent<TItem, TKey>) => void)
+      | undefined;
     /**
      * [descr:dxMenuOptions.onSubmenuShowing]
      */
-    onSubmenuShowing?: (
-      e: DevExpress.ui.dxMenu.SubmenuShowingEvent<TItem, TKey>
-    ) => void;
+    onSubmenuShowing?:
+      | ((e: DevExpress.ui.dxMenu.SubmenuShowingEvent<TItem, TKey>) => void)
+      | undefined;
     /**
      * [descr:dxMenuOptions.onSubmenuShown]
      */
-    onSubmenuShown?: (
-      e: DevExpress.ui.dxMenu.SubmenuShownEvent<TItem, TKey>
-    ) => void;
+    onSubmenuShown?:
+      | ((e: DevExpress.ui.dxMenu.SubmenuShownEvent<TItem, TKey>) => void)
+      | undefined;
     /**
      * [descr:dxMenuOptions.orientation]
      */
@@ -24207,10 +24326,12 @@ declare module DevExpress.ui {
     /**
      * [descr:dxNumberBoxOptions.buttons]
      */
-    buttons?: Array<
-      | DevExpress.ui.dxNumberBox.NumberBoxPredefinedButton
-      | DevExpress.common.TextEditorButton
-    >;
+    buttons?:
+      | Array<
+          | DevExpress.ui.dxNumberBox.NumberBoxPredefinedButton
+          | DevExpress.common.TextEditorButton
+        >
+      | undefined;
     /**
      * [descr:dxNumberBoxOptions.format]
      */
@@ -25608,22 +25729,28 @@ declare module DevExpress.ui {
     /**
      * [descr:dxPopupOptions.onResize]
      */
-    onResize?: (e: DevExpress.ui.dxPopup.ResizeEvent) => void;
+    onResize?: ((e: DevExpress.ui.dxPopup.ResizeEvent) => void) | undefined;
     /**
      * [descr:dxPopupOptions.onResizeEnd]
      */
-    onResizeEnd?: (e: DevExpress.ui.dxPopup.ResizeEndEvent) => void;
+    onResizeEnd?:
+      | ((e: DevExpress.ui.dxPopup.ResizeEndEvent) => void)
+      | undefined;
     /**
      * [descr:dxPopupOptions.onResizeStart]
      */
-    onResizeStart?: (e: DevExpress.ui.dxPopup.ResizeStartEvent) => void;
+    onResizeStart?:
+      | ((e: DevExpress.ui.dxPopup.ResizeStartEvent) => void)
+      | undefined;
     /**
      * [descr:dxPopupOptions.onTitleRendered]
      */
-    onTitleRendered?: (
-      e: DevExpress.common.core.events.EventInfo<TComponent> &
-        DevExpress.ui.dxPopup.TitleRenderedInfo
-    ) => void;
+    onTitleRendered?:
+      | ((
+          e: DevExpress.common.core.events.EventInfo<TComponent> &
+            DevExpress.ui.dxPopup.TitleRenderedInfo
+        ) => void)
+      | undefined;
     /**
      * [descr:dxPopupOptions.position]
      */
@@ -25730,7 +25857,9 @@ declare module DevExpress.ui {
     /**
      * [descr:dxProgressBarOptions.onComplete]
      */
-    onComplete?: (e: DevExpress.ui.dxProgressBar.CompleteEvent) => void;
+    onComplete?:
+      | ((e: DevExpress.ui.dxProgressBar.CompleteEvent) => void)
+      | undefined;
     /**
      * [descr:dxProgressBarOptions.showStatus]
      */
@@ -25889,7 +26018,9 @@ declare module DevExpress.ui {
     /**
      * [descr:dxRangeSliderOptions.onValueChanged]
      */
-    onValueChanged?: (e: DevExpress.ui.dxRangeSlider.ValueChangedEvent) => void;
+    onValueChanged?:
+      | ((e: DevExpress.ui.dxRangeSlider.ValueChangedEvent) => void)
+      | undefined;
     /**
      * [descr:dxRangeSliderOptions.start]
      */
@@ -26007,15 +26138,19 @@ declare module DevExpress.ui {
     /**
      * [descr:dxResizableOptions.onResize]
      */
-    onResize?: (e: DevExpress.ui.dxResizable.ResizeEvent) => void;
+    onResize?: ((e: DevExpress.ui.dxResizable.ResizeEvent) => void) | undefined;
     /**
      * [descr:dxResizableOptions.onResizeEnd]
      */
-    onResizeEnd?: (e: DevExpress.ui.dxResizable.ResizeEndEvent) => void;
+    onResizeEnd?:
+      | ((e: DevExpress.ui.dxResizable.ResizeEndEvent) => void)
+      | undefined;
     /**
      * [descr:dxResizableOptions.onResizeStart]
      */
-    onResizeStart?: (e: DevExpress.ui.dxResizable.ResizeStartEvent) => void;
+    onResizeStart?:
+      | ((e: DevExpress.ui.dxResizable.ResizeStartEvent) => void)
+      | undefined;
     /**
      * [descr:dxResizableOptions.width]
      */
@@ -26229,7 +26364,7 @@ declare module DevExpress.ui {
     /**
      * [descr:dxResponsiveBoxOptions.screenByWidth]
      */
-    screenByWidth?: Function;
+    screenByWidth?: Function | undefined;
     /**
      * [descr:dxResponsiveBoxOptions.singleColumnScreen]
      */
@@ -27543,15 +27678,15 @@ declare module DevExpress.ui {
     /**
      * [descr:dxScrollableOptions.onScroll]
      */
-    onScroll?: (
-      e: DevExpress.ui.dxScrollable.ScrollEventInfo<TComponent>
-    ) => void;
+    onScroll?:
+      | ((e: DevExpress.ui.dxScrollable.ScrollEventInfo<TComponent>) => void)
+      | null;
     /**
      * [descr:dxScrollableOptions.onUpdated]
      */
-    onUpdated?: (
-      e: DevExpress.ui.dxScrollable.ScrollEventInfo<TComponent>
-    ) => void;
+    onUpdated?:
+      | ((e: DevExpress.ui.dxScrollable.ScrollEventInfo<TComponent>) => void)
+      | null;
     /**
      * [descr:dxScrollableOptions.scrollByContent]
      */
@@ -27633,11 +27768,15 @@ declare module DevExpress.ui {
     /**
      * [descr:dxScrollViewOptions.onPullDown]
      */
-    onPullDown?: (e: DevExpress.ui.dxScrollView.PullDownEvent) => void;
+    onPullDown?:
+      | ((e: DevExpress.ui.dxScrollView.PullDownEvent) => void)
+      | undefined;
     /**
      * [descr:dxScrollViewOptions.onReachBottom]
      */
-    onReachBottom?: (e: DevExpress.ui.dxScrollView.ReachBottomEvent) => void;
+    onReachBottom?:
+      | ((e: DevExpress.ui.dxScrollView.ReachBottomEvent) => void)
+      | undefined;
     /**
      * [descr:dxScrollViewOptions.pulledDownText]
      */
@@ -27838,7 +27977,8 @@ declare module DevExpress.ui {
       | ((
           selectedItem: any,
           fieldElement: DevExpress.core.DxElement
-        ) => string | DevExpress.core.UserDefinedElement);
+        ) => string | DevExpress.core.UserDefinedElement)
+      | null;
     /**
      * [descr:dxSelectBoxOptions.fieldAddons]
      */
@@ -28655,9 +28795,9 @@ declare module DevExpress.ui {
     /**
      * [descr:dxSpeedDialActionOptions.onContentReady]
      */
-    onContentReady?: (
-      e: DevExpress.ui.dxSpeedDialAction.ContentReadyEvent
-    ) => void;
+    onContentReady?:
+      | ((e: DevExpress.ui.dxSpeedDialAction.ContentReadyEvent) => void)
+      | undefined;
     /**
      * [descr:dxSpeedDialActionOptions.visible]
      */
@@ -28885,23 +29025,31 @@ declare module DevExpress.ui {
     /**
      * [descr:dxSplitterOptions.onResize]
      */
-    onResize?: (e: DevExpress.ui.dxSplitter.ResizeEvent) => void;
+    onResize?: ((e: DevExpress.ui.dxSplitter.ResizeEvent) => void) | undefined;
     /**
      * [descr:dxSplitterOptions.onResizeEnd]
      */
-    onResizeEnd?: (e: DevExpress.ui.dxSplitter.ResizeEndEvent) => void;
+    onResizeEnd?:
+      | ((e: DevExpress.ui.dxSplitter.ResizeEndEvent) => void)
+      | undefined;
     /**
      * [descr:dxSplitterOptions.onResizeStart]
      */
-    onResizeStart?: (e: DevExpress.ui.dxSplitter.ResizeStartEvent) => void;
+    onResizeStart?:
+      | ((e: DevExpress.ui.dxSplitter.ResizeStartEvent) => void)
+      | undefined;
     /**
      * [descr:dxSplitterOptions.onItemExpanded]
      */
-    onItemExpanded?: (e: DevExpress.ui.dxSplitter.ItemExpandedEvent) => void;
+    onItemExpanded?:
+      | ((e: DevExpress.ui.dxSplitter.ItemExpandedEvent) => void)
+      | undefined;
     /**
      * [descr:dxSplitterOptions.onItemCollapsed]
      */
-    onItemCollapsed?: (e: DevExpress.ui.dxSplitter.ItemCollapsedEvent) => void;
+    onItemCollapsed?:
+      | ((e: DevExpress.ui.dxSplitter.ItemCollapsedEvent) => void)
+      | undefined;
   }
   /**
    * [descr:dxStepper]
@@ -29395,19 +29543,20 @@ declare module DevExpress.ui {
      */
     onTitleClick?:
       | ((e: DevExpress.ui.dxTabPanel.TitleClickEvent<TItem, TKey>) => void)
-      | string;
+      | string
+      | null;
     /**
      * [descr:dxTabPanelOptions.onTitleHold]
      */
-    onTitleHold?: (
-      e: DevExpress.ui.dxTabPanel.TitleHoldEvent<TItem, TKey>
-    ) => void;
+    onTitleHold?:
+      | ((e: DevExpress.ui.dxTabPanel.TitleHoldEvent<TItem, TKey>) => void)
+      | undefined;
     /**
      * [descr:dxTabPanelOptions.onTitleRendered]
      */
-    onTitleRendered?: (
-      e: DevExpress.ui.dxTabPanel.TitleRenderedEvent<TItem, TKey>
-    ) => void;
+    onTitleRendered?:
+      | ((e: DevExpress.ui.dxTabPanel.TitleRenderedEvent<TItem, TKey>) => void)
+      | undefined;
     /**
      * [descr:dxTabPanelOptions.repaintChangesOnly]
      */
@@ -29822,21 +29971,21 @@ declare module DevExpress.ui {
     /**
      * [descr:dxTagBoxOptions.onMultiTagPreparing]
      */
-    onMultiTagPreparing?: (
-      e: DevExpress.ui.dxTagBox.MultiTagPreparingEvent
-    ) => void;
+    onMultiTagPreparing?:
+      | ((e: DevExpress.ui.dxTagBox.MultiTagPreparingEvent) => void)
+      | undefined;
     /**
      * [descr:dxTagBoxOptions.onSelectAllValueChanged]
      */
-    onSelectAllValueChanged?: (
-      e: DevExpress.ui.dxTagBox.SelectAllValueChangedEvent
-    ) => void;
+    onSelectAllValueChanged?:
+      | ((e: DevExpress.ui.dxTagBox.SelectAllValueChangedEvent) => void)
+      | undefined;
     /**
      * [descr:dxTagBoxOptions.onSelectionChanged]
      */
-    onSelectionChanged?: (
-      e: DevExpress.ui.dxTagBox.SelectionChangedEvent
-    ) => void;
+    onSelectionChanged?:
+      | ((e: DevExpress.ui.dxTagBox.SelectionChangedEvent) => void)
+      | undefined;
     /**
      * [descr:dxTagBoxOptions.selectAllMode]
      */
@@ -30148,7 +30297,7 @@ declare module DevExpress.ui {
     /**
      * [descr:dxTextBoxOptions.maxLength]
      */
-    maxLength?: string | number;
+    maxLength?: string | number | null;
     /**
      * [descr:dxTextBoxOptions.mode]
      */
@@ -30197,11 +30346,13 @@ declare module DevExpress.ui {
     /**
      * [descr:dxTextEditorOptions.buttons]
      */
-    buttons?: Array<
-      | string
-      | DevExpress.common.TextBoxPredefinedButton
-      | DevExpress.common.TextEditorButton
-    >;
+    buttons?:
+      | Array<
+          | string
+          | DevExpress.common.TextBoxPredefinedButton
+          | DevExpress.common.TextEditorButton
+        >
+      | undefined;
     /**
      * [descr:dxTextEditorOptions.focusStateEnabled]
      */
@@ -30245,81 +30396,107 @@ declare module DevExpress.ui {
     /**
      * [descr:dxTextEditorOptions.onChange]
      */
-    onChange?: (
-      e: DevExpress.common.core.events.NativeEventInfo<TComponent, Event>
-    ) => void;
+    onChange?:
+      | ((
+          e: DevExpress.common.core.events.NativeEventInfo<TComponent, Event>
+        ) => void)
+      | null;
     /**
      * [descr:dxTextEditorOptions.onCopy]
      */
-    onCopy?: (
-      e: DevExpress.common.core.events.NativeEventInfo<
-        TComponent,
-        ClipboardEvent
-      >
-    ) => void;
+    onCopy?:
+      | ((
+          e: DevExpress.common.core.events.NativeEventInfo<
+            TComponent,
+            ClipboardEvent
+          >
+        ) => void)
+      | null;
     /**
      * [descr:dxTextEditorOptions.onCut]
      */
-    onCut?: (
-      e: DevExpress.common.core.events.NativeEventInfo<
-        TComponent,
-        ClipboardEvent
-      >
-    ) => void;
+    onCut?:
+      | ((
+          e: DevExpress.common.core.events.NativeEventInfo<
+            TComponent,
+            ClipboardEvent
+          >
+        ) => void)
+      | null;
     /**
      * [descr:dxTextEditorOptions.onEnterKey]
      */
-    onEnterKey?: (
-      e: DevExpress.common.core.events.NativeEventInfo<
-        TComponent,
-        KeyboardEvent
-      >
-    ) => void;
+    onEnterKey?:
+      | ((
+          e: DevExpress.common.core.events.NativeEventInfo<
+            TComponent,
+            KeyboardEvent
+          >
+        ) => void)
+      | null;
     /**
      * [descr:dxTextEditorOptions.onFocusIn]
      */
-    onFocusIn?: (
-      e: DevExpress.common.core.events.NativeEventInfo<TComponent, FocusEvent>
-    ) => void;
+    onFocusIn?:
+      | ((
+          e: DevExpress.common.core.events.NativeEventInfo<
+            TComponent,
+            FocusEvent
+          >
+        ) => void)
+      | null;
     /**
      * [descr:dxTextEditorOptions.onFocusOut]
      */
-    onFocusOut?: (
-      e: DevExpress.common.core.events.NativeEventInfo<TComponent, FocusEvent>
-    ) => void;
+    onFocusOut?:
+      | ((
+          e: DevExpress.common.core.events.NativeEventInfo<
+            TComponent,
+            FocusEvent
+          >
+        ) => void)
+      | null;
     /**
      * [descr:dxTextEditorOptions.onInput]
      */
-    onInput?: (
-      e: DevExpress.common.core.events.NativeEventInfo<TComponent, UIEvent>
-    ) => void;
+    onInput?:
+      | ((
+          e: DevExpress.common.core.events.NativeEventInfo<TComponent, UIEvent>
+        ) => void)
+      | null;
     /**
      * [descr:dxTextEditorOptions.onKeyDown]
      */
-    onKeyDown?: (
-      e: DevExpress.common.core.events.NativeEventInfo<
-        TComponent,
-        KeyboardEvent
-      >
-    ) => void;
+    onKeyDown?:
+      | ((
+          e: DevExpress.common.core.events.NativeEventInfo<
+            TComponent,
+            KeyboardEvent
+          >
+        ) => void)
+      | null;
     /**
      * [descr:dxTextEditorOptions.onKeyUp]
      */
-    onKeyUp?: (
-      e: DevExpress.common.core.events.NativeEventInfo<
-        TComponent,
-        KeyboardEvent
-      >
-    ) => void;
+    onKeyUp?:
+      | ((
+          e: DevExpress.common.core.events.NativeEventInfo<
+            TComponent,
+            KeyboardEvent
+          >
+        ) => void)
+      | null;
     /**
      * [descr:dxTextEditorOptions.onPaste]
      */
-    onPaste?: (
-      e: DevExpress.common.core.events.NativeEventInfo<
-        TComponent,
-        ClipboardEvent
-      >
-    ) => void;
+    onPaste?:
+      | ((
+          e: DevExpress.common.core.events.NativeEventInfo<
+            TComponent,
+            ClipboardEvent
+          >
+        ) => void)
+      | null;
     /**
      * [descr:dxTextEditorOptions.placeholder]
      */
@@ -33099,57 +33276,65 @@ declare module DevExpress.ui {
     /**
      * [descr:dxTreeViewOptions.onItemClick]
      */
-    onItemClick?: (
-      e: DevExpress.ui.dxTreeView.ItemClickEvent<TItem, TKey>
-    ) => void;
+    onItemClick?:
+      | ((e: DevExpress.ui.dxTreeView.ItemClickEvent<TItem, TKey>) => void)
+      | undefined;
     /**
      * [descr:dxTreeViewOptions.onItemCollapsed]
      */
-    onItemCollapsed?: (
-      e: DevExpress.ui.dxTreeView.ItemCollapsedEvent<TItem, TKey>
-    ) => void;
+    onItemCollapsed?:
+      | ((e: DevExpress.ui.dxTreeView.ItemCollapsedEvent<TItem, TKey>) => void)
+      | undefined;
     /**
      * [descr:dxTreeViewOptions.onItemContextMenu]
      */
-    onItemContextMenu?: (
-      e: DevExpress.ui.dxTreeView.ItemContextMenuEvent<TItem, TKey>
-    ) => void;
+    onItemContextMenu?:
+      | ((
+          e: DevExpress.ui.dxTreeView.ItemContextMenuEvent<TItem, TKey>
+        ) => void)
+      | undefined;
     /**
      * [descr:dxTreeViewOptions.onItemExpanded]
      */
-    onItemExpanded?: (
-      e: DevExpress.ui.dxTreeView.ItemExpandedEvent<TItem, TKey>
-    ) => void;
+    onItemExpanded?:
+      | ((e: DevExpress.ui.dxTreeView.ItemExpandedEvent<TItem, TKey>) => void)
+      | undefined;
     /**
      * [descr:dxTreeViewOptions.onItemHold]
      */
-    onItemHold?: (
-      e: DevExpress.ui.dxTreeView.ItemHoldEvent<TItem, TKey>
-    ) => void;
+    onItemHold?:
+      | ((e: DevExpress.ui.dxTreeView.ItemHoldEvent<TItem, TKey>) => void)
+      | undefined;
     /**
      * [descr:dxTreeViewOptions.onItemRendered]
      */
-    onItemRendered?: (
-      e: DevExpress.ui.dxTreeView.ItemRenderedEvent<TItem, TKey>
-    ) => void;
+    onItemRendered?:
+      | ((e: DevExpress.ui.dxTreeView.ItemRenderedEvent<TItem, TKey>) => void)
+      | undefined;
     /**
      * [descr:dxTreeViewOptions.onItemSelectionChanged]
      */
-    onItemSelectionChanged?: (
-      e: DevExpress.ui.dxTreeView.ItemSelectionChangedEvent<TItem, TKey>
-    ) => void;
+    onItemSelectionChanged?:
+      | ((
+          e: DevExpress.ui.dxTreeView.ItemSelectionChangedEvent<TItem, TKey>
+        ) => void)
+      | undefined;
     /**
      * [descr:dxTreeViewOptions.onSelectAllValueChanged]
      */
-    onSelectAllValueChanged?: (
-      e: DevExpress.ui.dxTreeView.SelectAllValueChangedEvent<TItem, TKey>
-    ) => void;
+    onSelectAllValueChanged?:
+      | ((
+          e: DevExpress.ui.dxTreeView.SelectAllValueChangedEvent<TItem, TKey>
+        ) => void)
+      | undefined;
     /**
      * [descr:dxTreeViewOptions.onSelectionChanged]
      */
-    onSelectionChanged?: (
-      e: DevExpress.ui.dxTreeView.SelectionChangedEvent<TItem, TKey>
-    ) => void;
+    onSelectionChanged?:
+      | ((
+          e: DevExpress.ui.dxTreeView.SelectionChangedEvent<TItem, TKey>
+        ) => void)
+      | undefined;
     /**
      * [descr:dxTreeViewOptions.parentIdExpr]
      */
@@ -33619,10 +33804,12 @@ declare module DevExpress.ui {
     /**
      * [descr:EditorOptions.onValueChanged]
      */
-    onValueChanged?: (
-      e: DevExpress.common.core.events.NativeEventInfo<TComponent, Event> &
-        DevExpress.ui.Editor.ValueChangedInfo
-    ) => void;
+    onValueChanged?:
+      | ((
+          e: DevExpress.common.core.events.NativeEventInfo<TComponent, Event> &
+            DevExpress.ui.Editor.ValueChangedInfo
+        ) => void)
+      | null;
     /**
      * [descr:EditorOptions.readOnly]
      */
@@ -33630,11 +33817,11 @@ declare module DevExpress.ui {
     /**
      * [descr:EditorOptions.validationError]
      */
-    validationError?: any;
+    validationError?: any | null;
     /**
      * [descr:EditorOptions.validationErrors]
      */
-    validationErrors?: Array<any>;
+    validationErrors?: Array<any> | null;
     /**
      * [descr:EditorOptions.validationMessageMode]
      */
@@ -33650,7 +33837,7 @@ declare module DevExpress.ui {
     /**
      * [descr:EditorOptions.value]
      */
-    value?: any;
+    value?: any | null;
     /**
      * [descr:EditorOptions.stylingMode]
      */
@@ -33806,7 +33993,7 @@ declare module DevExpress.ui {
     /**
      * [descr:SearchBoxMixinOptions.searchExpr]
      */
-    searchExpr?: string | Function | Array<string | Function>;
+    searchExpr?: string | Function | Array<string | Function> | null;
     /**
      * [descr:SearchBoxMixinOptions.searchMode]
      */
@@ -33950,9 +34137,9 @@ declare module DevExpress.ui {
     /**
      * [descr:WidgetOptions.onContentReady]
      */
-    onContentReady?: (
-      e: DevExpress.common.core.events.EventInfo<TComponent>
-    ) => void;
+    onContentReady?:
+      | ((e: DevExpress.common.core.events.EventInfo<TComponent>) => void)
+      | undefined;
     /**
      * [descr:WidgetOptions.tabIndex]
      */
@@ -35360,7 +35547,9 @@ declare module DevExpress.viz {
     /**
      * [descr:BaseChartOptions.onDone]
      */
-    onDone?: (e: DevExpress.common.core.events.EventInfo<TComponent>) => void;
+    onDone?:
+      | ((e: DevExpress.common.core.events.EventInfo<TComponent>) => void)
+      | undefined;
     /**
      * [descr:BaseChartOptions.onPointClick]
      */
@@ -35372,7 +35561,8 @@ declare module DevExpress.viz {
           > &
             DevExpress.viz.BaseChart.PointInteractionInfo<TPoint>
         ) => void)
-      | string;
+      | string
+      | undefined;
     /**
      * [descr:BaseChartOptions.onPointHoverChanged]
      */
@@ -35390,17 +35580,21 @@ declare module DevExpress.viz {
     /**
      * [descr:BaseChartOptions.onTooltipHidden]
      */
-    onTooltipHidden?: (
-      e: DevExpress.common.core.events.EventInfo<TComponent> &
-        DevExpress.viz.BaseChart.TooltipInfo<TPoint>
-    ) => void;
+    onTooltipHidden?:
+      | ((
+          e: DevExpress.common.core.events.EventInfo<TComponent> &
+            DevExpress.viz.BaseChart.TooltipInfo<TPoint>
+        ) => void)
+      | undefined;
     /**
      * [descr:BaseChartOptions.onTooltipShown]
      */
-    onTooltipShown?: (
-      e: DevExpress.common.core.events.EventInfo<TComponent> &
-        DevExpress.viz.BaseChart.TooltipInfo<TPoint>
-    ) => void;
+    onTooltipShown?:
+      | ((
+          e: DevExpress.common.core.events.EventInfo<TComponent> &
+            DevExpress.viz.BaseChart.TooltipInfo<TPoint>
+        ) => void)
+      | undefined;
     /**
      * [descr:BaseChartOptions.palette]
      */
@@ -35549,17 +35743,21 @@ declare module DevExpress.viz {
     /**
      * [descr:BaseGaugeOptions.onTooltipHidden]
      */
-    onTooltipHidden?: (
-      e: DevExpress.common.core.events.EventInfo<TComponent> &
-        DevExpress.viz.BaseGauge.TooltipInfo
-    ) => void;
+    onTooltipHidden?:
+      | ((
+          e: DevExpress.common.core.events.EventInfo<TComponent> &
+            DevExpress.viz.BaseGauge.TooltipInfo
+        ) => void)
+      | undefined;
     /**
      * [descr:BaseGaugeOptions.onTooltipShown]
      */
-    onTooltipShown?: (
-      e: DevExpress.common.core.events.EventInfo<TComponent> &
-        DevExpress.viz.BaseGauge.TooltipInfo
-    ) => void;
+    onTooltipShown?:
+      | ((
+          e: DevExpress.common.core.events.EventInfo<TComponent> &
+            DevExpress.viz.BaseGauge.TooltipInfo
+        ) => void)
+      | undefined;
     /**
      * [descr:BaseGaugeOptions.rangeContainer]
      */
@@ -35571,7 +35769,7 @@ declare module DevExpress.viz {
     /**
      * [descr:BaseGaugeOptions.subvalues]
      */
-    subvalues?: Array<number>;
+    subvalues?: Array<number> | undefined;
     /**
      * [descr:BaseGaugeOptions.tooltip]
      */
@@ -35632,11 +35830,11 @@ declare module DevExpress.viz {
     /**
      * [descr:BaseGaugeOptions.scale.customMinorTicks]
      */
-    customMinorTicks?: Array<number>;
+    customMinorTicks?: Array<number> | undefined;
     /**
      * [descr:BaseGaugeOptions.scale.customTicks]
      */
-    customTicks?: Array<number>;
+    customTicks?: Array<number> | undefined;
     /**
      * [descr:BaseGaugeOptions.scale.endValue]
      */
@@ -36042,15 +36240,15 @@ declare module DevExpress.viz {
     /**
      * [descr:BaseSparklineOptions.onTooltipHidden]
      */
-    onTooltipHidden?: (
-      e: DevExpress.common.core.events.EventInfo<TComponent>
-    ) => void;
+    onTooltipHidden?:
+      | ((e: DevExpress.common.core.events.EventInfo<TComponent>) => void)
+      | undefined;
     /**
      * [descr:BaseSparklineOptions.onTooltipShown]
      */
-    onTooltipShown?: (
-      e: DevExpress.common.core.events.EventInfo<TComponent>
-    ) => void;
+    onTooltipShown?:
+      | ((e: DevExpress.common.core.events.EventInfo<TComponent>) => void)
+      | undefined;
     /**
      * [descr:BaseSparklineOptions.redrawOnResize]
      */
@@ -36462,26 +36660,30 @@ declare module DevExpress.viz {
     /**
      * [descr:BaseWidgetOptions.onDrawn]
      */
-    onDrawn?: (e: DevExpress.common.core.events.EventInfo<TComponent>) => void;
+    onDrawn?:
+      | ((e: DevExpress.common.core.events.EventInfo<TComponent>) => void)
+      | undefined;
     /**
      * [descr:BaseWidgetOptions.onExported]
      */
-    onExported?: (
-      e: DevExpress.common.core.events.EventInfo<TComponent>
-    ) => void;
+    onExported?:
+      | ((e: DevExpress.common.core.events.EventInfo<TComponent>) => void)
+      | undefined;
     /**
      * [descr:BaseWidgetOptions.onExporting]
      */
-    onExporting?: (
-      e: DevExpress.common.core.events.EventInfo<TComponent> &
-        DevExpress.viz.BaseWidget.ExportInfo
-    ) => void;
+    onExporting?:
+      | ((
+          e: DevExpress.common.core.events.EventInfo<TComponent> &
+            DevExpress.viz.BaseWidget.ExportInfo
+        ) => void)
+      | undefined;
     /**
      * [descr:BaseWidgetOptions.onFileSaving]
      */
-    onFileSaving?: (
-      e: DevExpress.viz.BaseWidget.FileSavingEventInfo<TComponent>
-    ) => void;
+    onFileSaving?:
+      | ((e: DevExpress.viz.BaseWidget.FileSavingEventInfo<TComponent>) => void)
+      | undefined;
     /**
      * [descr:BaseWidgetOptions.onIncidentOccurred]
      */
@@ -36592,7 +36794,7 @@ declare module DevExpress.viz {
           /**
            * [descr:BaseWidgetOptions.title.subtitle.text]
            */
-          text?: string;
+          text?: string | undefined;
           /**
            * [descr:BaseWidgetOptions.title.subtitle.textOverflow]
            */
@@ -36606,7 +36808,7 @@ declare module DevExpress.viz {
     /**
      * [descr:BaseWidgetOptions.title.text]
      */
-    text?: string;
+    text?: string | undefined;
     /**
      * [descr:BaseWidgetOptions.title.textOverflow]
      */
@@ -37217,11 +37419,15 @@ declare module DevExpress.viz {
     /**
      * [descr:dxBarGaugeOptions.onTooltipHidden]
      */
-    onTooltipHidden?: (e: DevExpress.viz.dxBarGauge.TooltipHiddenEvent) => void;
+    onTooltipHidden?:
+      | ((e: DevExpress.viz.dxBarGauge.TooltipHiddenEvent) => void)
+      | undefined;
     /**
      * [descr:dxBarGaugeOptions.onTooltipShown]
      */
-    onTooltipShown?: (e: DevExpress.viz.dxBarGauge.TooltipShownEvent) => void;
+    onTooltipShown?:
+      | ((e: DevExpress.viz.dxBarGauge.TooltipShownEvent) => void)
+      | undefined;
     /**
      * [descr:dxBarGaugeOptions.palette]
      */
@@ -37406,7 +37612,7 @@ declare module DevExpress.viz {
       /**
        * [descr:dxChartOptions.argumentAxis.breaks]
        */
-      breaks?: Array<DevExpress.common.charts.ScaleBreak>;
+      breaks?: Array<DevExpress.common.charts.ScaleBreak> | undefined;
       /**
        * [descr:dxChartOptions.argumentAxis.categories]
        */
@@ -37426,7 +37632,7 @@ declare module DevExpress.viz {
       /**
        * [descr:dxChartOptions.argumentAxis.holidays]
        */
-      holidays?: Array<Date | string> | Array<number>;
+      holidays?: Array<Date | string> | Array<number> | undefined;
       /**
        * [descr:dxChartOptions.argumentAxis.hoverMode]
        */
@@ -37446,7 +37652,9 @@ declare module DevExpress.viz {
       /**
        * [descr:dxChartOptions.argumentAxis.minVisualRangeLength]
        */
-      minVisualRangeLength?: DevExpress.common.charts.TimeIntervalConfig;
+      minVisualRangeLength?:
+        | DevExpress.common.charts.TimeIntervalConfig
+        | undefined;
       /**
        * [descr:dxChartOptions.argumentAxis.minorTickCount]
        */
@@ -37474,7 +37682,7 @@ declare module DevExpress.viz {
       /**
        * [descr:dxChartOptions.argumentAxis.singleWorkdays]
        */
-      singleWorkdays?: Array<Date | string> | Array<number>;
+      singleWorkdays?: Array<Date | string> | Array<number> | undefined;
       /**
        * [descr:dxChartOptions.argumentAxis.strips]
        */
@@ -37919,7 +38127,7 @@ declare module DevExpress.viz {
       /**
        * [descr:dxChartOptions.commonAxisSettings.placeholderSize]
        */
-      placeholderSize?: number;
+      placeholderSize?: number | null;
       /**
        * [descr:dxChartOptions.commonAxisSettings.stripStyle]
        */
@@ -38602,7 +38810,7 @@ declare module DevExpress.viz {
       /**
        * [descr:dxChartOptions.valueAxis.breaks]
        */
-      breaks?: Array<DevExpress.common.charts.ScaleBreak>;
+      breaks?: Array<DevExpress.common.charts.ScaleBreak> | undefined;
       /**
        * [descr:dxChartOptions.valueAxis.categories]
        */
@@ -38638,7 +38846,9 @@ declare module DevExpress.viz {
       /**
        * [descr:dxChartOptions.valueAxis.minVisualRangeLength]
        */
-      minVisualRangeLength?: DevExpress.common.charts.TimeIntervalConfig;
+      minVisualRangeLength?:
+        | DevExpress.common.charts.TimeIntervalConfig
+        | undefined;
       /**
        * [descr:dxChartOptions.valueAxis.minorTickCount]
        */
@@ -39218,39 +39428,44 @@ declare module DevExpress.viz {
      */
     onArgumentAxisClick?:
       | ((e: DevExpress.viz.dxChart.ArgumentAxisClickEvent) => void)
-      | string;
+      | string
+      | undefined;
     /**
      * [descr:dxChartOptions.onLegendClick]
      */
     onLegendClick?:
       | ((e: DevExpress.viz.dxChart.LegendClickEvent) => void)
-      | string;
+      | string
+      | undefined;
     /**
      * [descr:dxChartOptions.onSeriesClick]
      */
     onSeriesClick?:
       | ((e: DevExpress.viz.dxChart.SeriesClickEvent) => void)
-      | string;
+      | string
+      | undefined;
     /**
      * [descr:dxChartOptions.onSeriesHoverChanged]
      */
-    onSeriesHoverChanged?: (
-      e: DevExpress.viz.dxChart.SeriesHoverChangedEvent
-    ) => void;
+    onSeriesHoverChanged?:
+      | ((e: DevExpress.viz.dxChart.SeriesHoverChangedEvent) => void)
+      | undefined;
     /**
      * [descr:dxChartOptions.onSeriesSelectionChanged]
      */
-    onSeriesSelectionChanged?: (
-      e: DevExpress.viz.dxChart.SeriesSelectionChangedEvent
-    ) => void;
+    onSeriesSelectionChanged?:
+      | ((e: DevExpress.viz.dxChart.SeriesSelectionChangedEvent) => void)
+      | undefined;
     /**
      * [descr:dxChartOptions.onZoomEnd]
      */
-    onZoomEnd?: (e: DevExpress.viz.dxChart.ZoomEndEvent) => void;
+    onZoomEnd?: ((e: DevExpress.viz.dxChart.ZoomEndEvent) => void) | undefined;
     /**
      * [descr:dxChartOptions.onZoomStart]
      */
-    onZoomStart?: (e: DevExpress.viz.dxChart.ZoomStartEvent) => void;
+    onZoomStart?:
+      | ((e: DevExpress.viz.dxChart.ZoomStartEvent) => void)
+      | undefined;
     /**
      * [descr:dxChartOptions.panes]
      */
@@ -41719,25 +41934,29 @@ declare module DevExpress.viz {
     /**
      * [descr:dxFunnelOptions.onHoverChanged]
      */
-    onHoverChanged?: (e: DevExpress.viz.dxFunnel.HoverChangedEvent) => void;
+    onHoverChanged?:
+      | ((e: DevExpress.viz.dxFunnel.HoverChangedEvent) => void)
+      | undefined;
     /**
      * [descr:dxFunnelOptions.onItemClick]
      */
     onItemClick?:
       | ((e: DevExpress.viz.dxFunnel.ItemClickEvent) => void)
-      | string;
+      | string
+      | undefined;
     /**
      * [descr:dxFunnelOptions.onLegendClick]
      */
     onLegendClick?:
       | ((e: DevExpress.viz.dxFunnel.LegendClickEvent) => void)
-      | string;
+      | string
+      | undefined;
     /**
      * [descr:dxFunnelOptions.onSelectionChanged]
      */
-    onSelectionChanged?: (
-      e: DevExpress.viz.dxFunnel.SelectionChangedEvent
-    ) => void;
+    onSelectionChanged?:
+      | ((e: DevExpress.viz.dxFunnel.SelectionChangedEvent) => void)
+      | undefined;
     /**
      * [descr:dxFunnelOptions.palette]
      */
@@ -42226,7 +42445,8 @@ declare module DevExpress.viz {
      */
     onLegendClick?:
       | ((e: DevExpress.viz.dxPieChart.LegendClickEvent) => void)
-      | string;
+      | string
+      | undefined;
     /**
      * [descr:dxPieChartOptions.palette]
      */
@@ -43301,7 +43521,9 @@ declare module DevExpress.viz {
       /**
        * [descr:dxPolarChartOptions.valueAxis.minVisualRangeLength]
        */
-      minVisualRangeLength?: DevExpress.common.charts.TimeIntervalConfig;
+      minVisualRangeLength?:
+        | DevExpress.common.charts.TimeIntervalConfig
+        | undefined;
       /**
        * [descr:dxPolarChartOptions.valueAxis.minorTickCount]
        */
@@ -43642,39 +43864,46 @@ declare module DevExpress.viz {
      */
     onArgumentAxisClick?:
       | ((e: DevExpress.viz.dxPolarChart.ArgumentAxisClickEvent) => void)
-      | string;
+      | string
+      | undefined;
     /**
      * [descr:dxPolarChartOptions.onLegendClick]
      */
     onLegendClick?:
       | ((e: DevExpress.viz.dxPolarChart.LegendClickEvent) => void)
-      | string;
+      | string
+      | undefined;
     /**
      * [descr:dxPolarChartOptions.onSeriesClick]
      */
     onSeriesClick?:
       | ((e: DevExpress.viz.dxPolarChart.SeriesClickEvent) => void)
-      | string;
+      | string
+      | undefined;
     /**
      * [descr:dxPolarChartOptions.onSeriesHoverChanged]
      */
-    onSeriesHoverChanged?: (
-      e: DevExpress.viz.dxPolarChart.SeriesHoverChangedEvent
-    ) => void;
+    onSeriesHoverChanged?:
+      | ((e: DevExpress.viz.dxPolarChart.SeriesHoverChangedEvent) => void)
+      | undefined;
     /**
      * [descr:dxPolarChartOptions.onSeriesSelectionChanged]
      */
-    onSeriesSelectionChanged?: (
-      e: DevExpress.viz.dxPolarChart.SeriesSelectionChangedEvent
-    ) => void;
+    onSeriesSelectionChanged?:
+      | ((e: DevExpress.viz.dxPolarChart.SeriesSelectionChangedEvent) => void)
+      | undefined;
     /**
      * [descr:dxPolarChartOptions.onZoomEnd]
      */
-    onZoomEnd?: (e: DevExpress.viz.dxPolarChart.ZoomEndEvent) => void;
+    onZoomEnd?:
+      | ((e: DevExpress.viz.dxPolarChart.ZoomEndEvent) => void)
+      | undefined;
     /**
      * [descr:dxPolarChartOptions.onZoomStart]
      */
-    onZoomStart?: (e: DevExpress.viz.dxPolarChart.ZoomStartEvent) => void;
+    onZoomStart?:
+      | ((e: DevExpress.viz.dxPolarChart.ZoomStartEvent) => void)
+      | undefined;
     /**
      * [descr:dxPolarChartOptions.resolveLabelOverlapping]
      */
@@ -44623,9 +44852,9 @@ declare module DevExpress.viz {
     /**
      * [descr:dxRangeSelectorOptions.onValueChanged]
      */
-    onValueChanged?: (
-      e: DevExpress.viz.dxRangeSelector.ValueChangedEvent
-    ) => void;
+    onValueChanged?:
+      | ((e: DevExpress.viz.dxRangeSelector.ValueChangedEvent) => void)
+      | undefined;
     /**
      * [descr:dxRangeSelectorOptions.scale]
      */
@@ -44666,7 +44895,7 @@ declare module DevExpress.viz {
       /**
        * [descr:dxRangeSelectorOptions.scale.breaks]
        */
-      breaks?: Array<DevExpress.common.charts.ScaleBreak>;
+      breaks?: Array<DevExpress.common.charts.ScaleBreak> | undefined;
       /**
        * [descr:dxRangeSelectorOptions.scale.categories]
        */
@@ -44682,7 +44911,7 @@ declare module DevExpress.viz {
       /**
        * [descr:dxRangeSelectorOptions.scale.holidays]
        */
-      holidays?: Array<Date | string> | Array<number>;
+      holidays?: Array<Date | string> | Array<number> | undefined;
       /**
        * [descr:dxRangeSelectorOptions.scale.label]
        */
@@ -44812,7 +45041,7 @@ declare module DevExpress.viz {
       /**
        * [descr:dxRangeSelectorOptions.scale.singleWorkdays]
        */
-      singleWorkdays?: Array<Date | string> | Array<number>;
+      singleWorkdays?: Array<Date | string> | Array<number> | undefined;
       /**
        * [descr:dxRangeSelectorOptions.scale.startValue]
        */
@@ -45471,21 +45700,27 @@ declare module DevExpress.viz {
      */
     onLinkClick?:
       | ((e: DevExpress.viz.dxSankey.LinkClickEvent) => void)
-      | string;
+      | string
+      | undefined;
     /**
      * [descr:dxSankeyOptions.onLinkHoverChanged]
      */
-    onLinkHoverChanged?: (e: DevExpress.viz.dxSankey.LinkHoverEvent) => void;
+    onLinkHoverChanged?:
+      | ((e: DevExpress.viz.dxSankey.LinkHoverEvent) => void)
+      | undefined;
     /**
      * [descr:dxSankeyOptions.onNodeClick]
      */
     onNodeClick?:
       | ((e: DevExpress.viz.dxSankey.NodeClickEvent) => void)
-      | string;
+      | string
+      | undefined;
     /**
      * [descr:dxSankeyOptions.onNodeHoverChanged]
      */
-    onNodeHoverChanged?: (e: DevExpress.viz.dxSankey.NodeHoverEvent) => void;
+    onNodeHoverChanged?:
+      | ((e: DevExpress.viz.dxSankey.NodeHoverEvent) => void)
+      | undefined;
     /**
      * [descr:dxSankeyOptions.palette]
      */
@@ -45981,7 +46216,7 @@ declare module DevExpress.viz {
       /**
        * [descr:dxTreeMapOptions.colorizer.range]
        */
-      range?: Array<number>;
+      range?: Array<number> | undefined;
       /**
        * [descr:dxTreeMapOptions.colorizer.type]
        */
@@ -46127,33 +46362,38 @@ declare module DevExpress.viz {
     /**
      * [descr:dxTreeMapOptions.onClick]
      */
-    onClick?: ((e: DevExpress.viz.dxTreeMap.ClickEvent) => void) | string;
+    onClick?:
+      | ((e: DevExpress.viz.dxTreeMap.ClickEvent) => void)
+      | string
+      | undefined;
     /**
      * [descr:dxTreeMapOptions.onDrill]
      */
-    onDrill?: (e: DevExpress.viz.dxTreeMap.DrillEvent) => void;
+    onDrill?: ((e: DevExpress.viz.dxTreeMap.DrillEvent) => void) | undefined;
     /**
      * [descr:dxTreeMapOptions.onHoverChanged]
      */
-    onHoverChanged?: (e: DevExpress.viz.dxTreeMap.HoverChangedEvent) => void;
+    onHoverChanged?:
+      | ((e: DevExpress.viz.dxTreeMap.HoverChangedEvent) => void)
+      | undefined;
     /**
      * [descr:dxTreeMapOptions.onNodesInitialized]
      */
-    onNodesInitialized?: (
-      e: DevExpress.viz.dxTreeMap.NodesInitializedEvent
-    ) => void;
+    onNodesInitialized?:
+      | ((e: DevExpress.viz.dxTreeMap.NodesInitializedEvent) => void)
+      | undefined;
     /**
      * [descr:dxTreeMapOptions.onNodesRendering]
      */
-    onNodesRendering?: (
-      e: DevExpress.viz.dxTreeMap.NodesRenderingEvent
-    ) => void;
+    onNodesRendering?:
+      | ((e: DevExpress.viz.dxTreeMap.NodesRenderingEvent) => void)
+      | undefined;
     /**
      * [descr:dxTreeMapOptions.onSelectionChanged]
      */
-    onSelectionChanged?: (
-      e: DevExpress.viz.dxTreeMap.SelectionChangedEvent
-    ) => void;
+    onSelectionChanged?:
+      | ((e: DevExpress.viz.dxTreeMap.SelectionChangedEvent) => void)
+      | undefined;
     /**
      * [descr:dxTreeMapOptions.parentField]
      */
@@ -46533,7 +46773,7 @@ declare module DevExpress.viz {
     /**
      * [descr:dxVectorMapCommonAnnotationConfig.coordinates]
      */
-    coordinates?: Array<number>;
+    coordinates?: Array<number> | undefined;
     /**
      * [descr:dxVectorMapCommonAnnotationConfig.customizeTooltip]
      */
@@ -46583,7 +46823,7 @@ declare module DevExpress.viz {
     /**
      * [descr:dxVectorMapOptions.bounds]
      */
-    bounds?: Array<number>;
+    bounds?: Array<number> | undefined;
     /**
      * [descr:dxVectorMapOptions.center]
      */
@@ -46653,7 +46893,7 @@ declare module DevExpress.viz {
           /**
            * [descr:dxVectorMapOptions.layers.colorGroups]
            */
-          colorGroups?: Array<number>;
+          colorGroups?: Array<number> | undefined;
           /**
            * [descr:dxVectorMapOptions.layers.customize]
            */
@@ -46758,7 +46998,7 @@ declare module DevExpress.viz {
           /**
            * [descr:dxVectorMapOptions.layers.sizeGroups]
            */
-          sizeGroups?: Array<number>;
+          sizeGroups?: Array<number> | undefined;
           /**
            * [descr:dxVectorMapOptions.layers.type]
            */
@@ -46813,35 +47053,40 @@ declare module DevExpress.viz {
     /**
      * [descr:dxVectorMapOptions.onCenterChanged]
      */
-    onCenterChanged?: (
-      e: DevExpress.viz.dxVectorMap.CenterChangedEvent
-    ) => void;
+    onCenterChanged?:
+      | ((e: DevExpress.viz.dxVectorMap.CenterChangedEvent) => void)
+      | undefined;
     /**
      * [descr:dxVectorMapOptions.onClick]
      */
-    onClick?: ((e: DevExpress.viz.dxVectorMap.ClickEvent) => void) | string;
+    onClick?:
+      | ((e: DevExpress.viz.dxVectorMap.ClickEvent) => void)
+      | string
+      | undefined;
     /**
      * [descr:dxVectorMapOptions.onSelectionChanged]
      */
-    onSelectionChanged?: (
-      e: DevExpress.viz.dxVectorMap.SelectionChangedEvent
-    ) => void;
+    onSelectionChanged?:
+      | ((e: DevExpress.viz.dxVectorMap.SelectionChangedEvent) => void)
+      | undefined;
     /**
      * [descr:dxVectorMapOptions.onTooltipHidden]
      */
-    onTooltipHidden?: (
-      e: DevExpress.viz.dxVectorMap.TooltipHiddenEvent
-    ) => void;
+    onTooltipHidden?:
+      | ((e: DevExpress.viz.dxVectorMap.TooltipHiddenEvent) => void)
+      | undefined;
     /**
      * [descr:dxVectorMapOptions.onTooltipShown]
      */
-    onTooltipShown?: (e: DevExpress.viz.dxVectorMap.TooltipShownEvent) => void;
+    onTooltipShown?:
+      | ((e: DevExpress.viz.dxVectorMap.TooltipShownEvent) => void)
+      | undefined;
     /**
      * [descr:dxVectorMapOptions.onZoomFactorChanged]
      */
-    onZoomFactorChanged?: (
-      e: DevExpress.viz.dxVectorMap.ZoomFactorChangedEvent
-    ) => void;
+    onZoomFactorChanged?:
+      | ((e: DevExpress.viz.dxVectorMap.ZoomFactorChangedEvent) => void)
+      | undefined;
     /**
      * [descr:dxVectorMapOptions.panningEnabled]
      */