diff --git a/packages/devextreme-angular/src/ui/drop-down-button/index.ts b/packages/devextreme-angular/src/ui/drop-down-button/index.ts index e00e4a019aa2..26edeac06a7f 100644 --- a/packages/devextreme-angular/src/ui/drop-down-button/index.ts +++ b/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 { + get items(): Array | null { return this._getOption('items'); } - set items(value: Array) { + set items(value: Array | 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>; + @Output() itemsChange: EventEmitter | 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; + @Output() selectedItemChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ - @Output() selectedItemKeyChange: EventEmitter; + @Output() selectedItemKeyChange: EventEmitter; /** diff --git a/packages/devextreme-vue/src/drop-down-button.ts b/packages/devextreme-vue/src/drop-down-button.ts index e41d25fa9f4f..b288957c537c 100644 --- a/packages/devextreme-vue/src/drop-down-button.ts +++ b/packages/devextreme-vue/src/drop-down-button.ts @@ -124,7 +124,7 @@ const componentConfig = { hint: String, hoverStateEnabled: Boolean, icon: String, - items: Array as PropType>, + items: Array as PropType<(Array) | 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, showArrowIcon: Boolean, splitButton: Boolean, stylingMode: String as PropType, diff --git a/packages/devextreme/js/__internal/data/data_controller/data_controller.ts b/packages/devextreme/js/__internal/data/data_controller/data_controller.ts index 93399b855398..d7b835cdba68 100644 --- a/packages/devextreme/js/__internal/data/data_controller/data_controller.ts +++ b/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) { diff --git a/packages/devextreme/js/__internal/ui/drop_down_button.ts b/packages/devextreme/js/__internal/ui/drop_down_button.ts index 309854a9a3a4..a62063b4caae 100644 --- a/packages/devextreme/js/__internal/ui/drop_down_button.ts +++ b/packages/devextreme/js/__internal/ui/drop_down_button.ts @@ -97,7 +97,6 @@ class DropDownButton extends Widget { 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 { 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 { } // T977758 - _renderFocusTarget(): void {} _render(): void { @@ -500,6 +498,7 @@ class DropDownButton extends Widget { noDataText, displayExpr, itemTemplate, + // @ts-expect-error Update dxListOptions.items typings items, dataSource: this._dataController.getDataSource() as DataSourceLike | null, onItemClick: (e): void => { @@ -771,7 +770,7 @@ class DropDownButton extends Widget { } } - _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 { 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(); diff --git a/packages/devextreme/js/ui/drop_down_button.d.ts b/packages/devextreme/js/ui/drop_down_button.d.ts index 726515766ce4..4a5fc6f364ea 100644 --- a/packages/devextreme/js/ui/drop_down_button.d.ts +++ b/packages/devextreme/js/ui/drop_down_button.d.ts @@ -193,11 +193,11 @@ export interface dxDropDownButtonOptions extends WidgetOptions itemTemplate?: template | ((itemData: any, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement); /** * @docid - * @type Array + * @type Array | null * @default null * @public */ - items?: Array; + items?: Array | null; /** * @docid * @default 'this' @@ -218,7 +218,7 @@ export interface dxDropDownButtonOptions extends WidgetOptions * @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 * @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 * @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 * @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 */ diff --git a/packages/devextreme/ts/dx.all.d.ts b/packages/devextreme/ts/dx.all.d.ts index c4b401bff1d2..b17c74607a3b 100644 --- a/packages/devextreme/ts/dx.all.d.ts +++ b/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; + items?: Array | null; /** * [descr:dxDropDownButtonOptions.keyExpr] */ @@ -17130,19 +17131,22 @@ 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] */ @@ -17150,11 +17154,11 @@ declare module DevExpress.ui { /** * [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] */