DropDownButton: Fix public types and revert changed default values in internal code

packages/devextreme-angular/src/ui/drop-down-button/index.ts

@@ -293,10 +293,10 @@ export class DxDropDownButtonComponent extends DxComponent implements OnDestroy,
 
      */
     @Input()
-    get items(): Array<any | dxDropDownButtonItem> {
+    get items(): Array<any | dxDropDownButtonItem> | null {
         return this._getOption('items');
     }
-    set items(value: Array<any | dxDropDownButtonItem>) {
+    set items(value: Array<any | dxDropDownButtonItem> | null) {
         this._setOption('items', value);
     }
 
@@ -371,10 +371,10 @@ export class DxDropDownButtonComponent extends DxComponent implements OnDestroy,
 
      */
     @Input()
-    get selectedItem(): any | number | string {
+    get selectedItem(): any | null | number | string {
         return this._getOption('selectedItem');
     }
-    set selectedItem(value: any | number | string) {
+    set selectedItem(value: any | null | number | string) {
         this._setOption('selectedItem', value);
     }
 
@@ -384,10 +384,10 @@ export class DxDropDownButtonComponent extends DxComponent implements OnDestroy,
 
      */
     @Input()
-    get selectedItemKey(): number | string {
+    get selectedItemKey(): null | number | string {
         return this._getOption('selectedItemKey');
     }
-    set selectedItemKey(value: number | string) {
+    set selectedItemKey(value: null | number | string) {
         this._setOption('selectedItemKey', value);
     }
 
@@ -706,7 +706,7 @@ export class DxDropDownButtonComponent extends DxComponent implements OnDestroy,
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
 
      */
-    @Output() itemsChange: EventEmitter<Array<any | dxDropDownButtonItem>>;
+    @Output() itemsChange: EventEmitter<Array<any | dxDropDownButtonItem> | null>;
 
     /**
 
@@ -748,14 +748,14 @@ export class DxDropDownButtonComponent extends DxComponent implements OnDestroy,
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
 
      */
-    @Output() selectedItemChange: EventEmitter<any | number | string>;
+    @Output() selectedItemChange: EventEmitter<any | null | number | string>;
 
     /**
 
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
 
      */
-    @Output() selectedItemKeyChange: EventEmitter<number | string>;
+    @Output() selectedItemKeyChange: EventEmitter<null | number | string>;
 
     /**
 

packages/devextreme-vue/src/drop-down-button.ts

@@ -124,7 +124,7 @@ const componentConfig = {
     hint: String,
     hoverStateEnabled: Boolean,
     icon: String,
-    items: Array as PropType<Array<any | dxDropDownButtonItem>>,
+    items: Array as PropType<(Array<any | dxDropDownButtonItem>) | null>,
     itemTemplate: {},
     keyExpr: String,
     noDataText: String,
@@ -138,7 +138,7 @@ const componentConfig = {
     opened: Boolean,
     rtlEnabled: Boolean,
     selectedItem: {},
-    selectedItemKey: [Number, String],
+    selectedItemKey: [Number, String] as PropType<null | number | string>,
     showArrowIcon: Boolean,
     splitButton: Boolean,
     stylingMode: String as PropType<ButtonStyle>,

packages/devextreme/js/__internal/data/data_controller/data_controller.ts

@@ -184,7 +184,7 @@ class DataController {
     }
   }
 
-  updateDataSource(items?: unknown[] | DataSourceType, key?: string): void {
+  updateDataSource(items?: unknown[] | DataSourceType | null, key?: string): void {
     const dataSourceOptions = items ?? this.items();
 
     if (key) {

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

@@ -97,7 +97,6 @@ class DropDownButton extends Widget<DropDownButtonProperties> {
       itemTemplate: 'item',
       keyExpr: 'this',
       selectedItem: null,
-      // @ts-expect-error public API needs to be fixed
       selectedItemKey: null,
       stylingMode: 'outlined',
       deferRendering: true,
@@ -109,11 +108,11 @@ class DropDownButton extends Widget<DropDownButtonProperties> {
       template: null,
       text: '',
       type: 'normal',
-      onButtonClick: undefined,
-      onSelectionChanged: undefined,
-      onItemClick: undefined,
+      onButtonClick: null,
+      onSelectionChanged: null,
+      onItemClick: null,
       opened: false,
-      items: undefined,
+      items: null,
       dataSource: null,
       focusStateEnabled: true,
       hoverStateEnabled: true,
@@ -202,7 +201,6 @@ class DropDownButton extends Widget<DropDownButtonProperties> {
   }
 
   // T977758
-
   _renderFocusTarget(): void {}
 
   _render(): void {
@@ -500,6 +498,7 @@ class DropDownButton extends Widget<DropDownButtonProperties> {
       noDataText,
       displayExpr,
       itemTemplate,
+      // @ts-expect-error Update dxListOptions.items typings
       items,
       dataSource: this._dataController.getDataSource() as DataSourceLike<Item> | null,
       onItemClick: (e): void => {
@@ -771,7 +770,7 @@ class DropDownButton extends Widget<DropDownButtonProperties> {
     }
   }
 
-  _updateDataController(items?: unknown[] | DataSourceType): void {
+  _updateDataController(items?: unknown[] | DataSourceType | null): void {
     const { keyExpr } = this.option();
     this._dataController.updateDataSource(items, keyExpr);
     this._updateKeyExpr();
@@ -827,12 +826,12 @@ class DropDownButton extends Widget<DropDownButtonProperties> {
         this._updateButtonGroup(name, value);
         super._optionChanged(args);
         break;
-      case 'items':
-        // eslint-disable-next-line no-case-declarations
+      case 'items': {
         const { items } = this.option();
         this._updateDataController(items);
         this._updateItemCollection(name);
         break;
+      }
       case 'dataSource':
         this._dataController.updateDataSource(value as unknown[] | DataSourceType);
         this._updateKeyExpr();

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

@@ -193,11 +193,11 @@ export interface dxDropDownButtonOptions extends WidgetOptions<dxDropDownButton>
     itemTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement);
     /**
      * @docid
-     * @type Array<dxDropDownButtonItem | any>
+     * @type Array<dxDropDownButtonItem | any> | null
      * @default null
      * @public
      */
-    items?: Array<Item | any>;
+    items?: Array<Item | any> | null;
     /**
      * @docid
      * @default 'this'
@@ -218,7 +218,7 @@ export interface dxDropDownButtonOptions extends WidgetOptions<dxDropDownButton>
      * @action
      * @public
      */
-    onButtonClick?: ((e: ButtonClickEvent) => void) | string;
+    onButtonClick?: ((e: ButtonClickEvent) => void) | string | null;
     /**
      * @docid
      * @default null
@@ -227,7 +227,7 @@ export interface dxDropDownButtonOptions extends WidgetOptions<dxDropDownButton>
      * @action
      * @public
      */
-    onItemClick?: ((e: ItemClickEvent) => void) | string;
+    onItemClick?: ((e: ItemClickEvent) => void) | string | null;
     /**
      * @docid
      * @default null
@@ -236,7 +236,7 @@ export interface dxDropDownButtonOptions extends WidgetOptions<dxDropDownButton>
      * @action
      * @public
      */
-    onSelectionChanged?: ((e: SelectionChangedEvent) => void) | string;
+    onSelectionChanged?: ((e: SelectionChangedEvent) => void) | string | null;
     /**
      * @docid
      * @default false
@@ -249,13 +249,13 @@ export interface dxDropDownButtonOptions extends WidgetOptions<dxDropDownButton>
      * @readonly
      * @public
      */
-    selectedItem?: string | number | any;
+    selectedItem?: string | number | any | null;
     /**
      * @docid
      * @default null
      * @public
      */
-    selectedItemKey?: string | number;
+    selectedItemKey?: string | number | null;
     /**
      * @docid
      * @default true
@@ -367,7 +367,7 @@ export interface dxDropDownButtonItem extends dxListItem {
      * @type_function_param1 e:{ui/drop_down_button:ItemClickEvent}
      * @public
      */
-     onClick?: ((e: ItemClickEvent) => void) | string;
+     onClick?: ((e: ItemClickEvent) => void) | string | null;
 }
 
 /** @public */

packages/devextreme/ts/dx.all.d.ts

@@ -17053,7 +17053,8 @@ declare module DevExpress.ui {
      */
     onClick?:
       | ((e: DevExpress.ui.dxDropDownButton.ItemClickEvent) => void)
-      | string;
+      | string
+      | null;
   }
   /**
    * [descr:dxDropDownButtonOptions]
@@ -17116,7 +17117,7 @@ declare module DevExpress.ui {
     /**
      * [descr:dxDropDownButtonOptions.items]
      */
-    items?: Array<DevExpress.ui.dxDropDownButton.Item | any>;
+    items?: Array<DevExpress.ui.dxDropDownButton.Item | any> | null;
     /**
      * [descr:dxDropDownButtonOptions.keyExpr]
      */
@@ -17130,31 +17131,34 @@ declare module DevExpress.ui {
      */
     onButtonClick?:
       | ((e: DevExpress.ui.dxDropDownButton.ButtonClickEvent) => void)
-      | string;
+      | string
+      | null;
     /**
      * [descr:dxDropDownButtonOptions.onItemClick]
      */
     onItemClick?:
       | ((e: DevExpress.ui.dxDropDownButton.ItemClickEvent) => void)
-      | string;
+      | string
+      | null;
     /**
      * [descr:dxDropDownButtonOptions.onSelectionChanged]
      */
     onSelectionChanged?:
       | ((e: DevExpress.ui.dxDropDownButton.SelectionChangedEvent) => void)
-      | string;
+      | string
+      | null;
     /**
      * [descr:dxDropDownButtonOptions.opened]
      */
     opened?: boolean;
     /**
      * [descr:dxDropDownButtonOptions.selectedItem]
      */
-    selectedItem?: string | number | any;
+    selectedItem?: string | number | any | null;
     /**
      * [descr:dxDropDownButtonOptions.selectedItemKey]
      */
-    selectedItemKey?: string | number;
+    selectedItemKey?: string | number | null;
     /**
      * [descr:dxDropDownButtonOptions.showArrowIcon]
      */