Collection: publish onSelectionChanging event for AutoComplete, List,…

… Lookup, SelectBox, TabPanel, Tabs, TagBox (#27954)

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

@@ -27,7 +27,7 @@ import {
 import { EditorStyle, LabelMode, Mode, Position, SimplifiedSearchMode, TextEditorButton, ValidationMessageMode, ValidationStatus } from 'devextreme/common';
 import { Store } from 'devextreme/data';
 import DataSource, { Options as DataSourceOptions } from 'devextreme/data/data_source';
-import { ChangeEvent, ClosedEvent, ContentReadyEvent, CopyEvent, CutEvent, DisposingEvent, EnterKeyEvent, FocusInEvent, FocusOutEvent, InitializedEvent, InputEvent, ItemClickEvent, KeyDownEvent, KeyUpEvent, OpenedEvent, OptionChangedEvent, PasteEvent, SelectionChangedEvent, ValueChangedEvent } from 'devextreme/ui/autocomplete';
+import { ChangeEvent, ClosedEvent, ContentReadyEvent, CopyEvent, CutEvent, DisposingEvent, EnterKeyEvent, FocusInEvent, FocusOutEvent, InitializedEvent, InputEvent, ItemClickEvent, KeyDownEvent, KeyUpEvent, OpenedEvent, OptionChangedEvent, PasteEvent, SelectionChangedEvent, SelectionChangingEvent, ValueChangedEvent } from 'devextreme/ui/autocomplete';
 import { CollectionWidgetItem } from 'devextreme/ui/collection/ui.collection_widget.base';
 import { DropDownPredefinedButton } from 'devextreme/ui/drop_down_editor/ui.drop_down_editor';
 import { Properties as dxPopupOptions } from 'devextreme/ui/popup';
@@ -940,6 +940,14 @@ export class DxAutocompleteComponent extends DxComponent implements OnDestroy, C
      */
     @Output() onSelectionChanged: EventEmitter<SelectionChangedEvent>;
 
+    /**
+    
+     * [descr:dxAutocompleteOptions.onSelectionChanging]
+    
+    
+     */
+    @Output() onSelectionChanging: EventEmitter<SelectionChangingEvent>;
+
     /**
     
      * [descr:dxAutocompleteOptions.onValueChanged]
@@ -1386,6 +1394,7 @@ export class DxAutocompleteComponent extends DxComponent implements OnDestroy, C
             { subscribe: 'optionChanged', emit: 'onOptionChanged' },
             { subscribe: 'paste', emit: 'onPaste' },
             { subscribe: 'selectionChanged', emit: 'onSelectionChanged' },
+            { subscribe: 'selectionChanging', emit: 'onSelectionChanging' },
             { subscribe: 'valueChanged', emit: 'onValueChanged' },
             { emit: 'accessKeyChange' },
             { emit: 'activeStateEnabledChange' },

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

@@ -26,7 +26,7 @@ export { ExplicitTypes } from 'devextreme/ui/list';
 import { PageLoadMode, ScrollbarMode, SearchMode, SelectAllMode, SingleMultipleAllOrNone } from 'devextreme/common';
 import { Store } from 'devextreme/data';
 import DataSource, { Options as DataSourceOptions } from 'devextreme/data/data_source';
-import { ContentReadyEvent, DisposingEvent, dxListItem, GroupRenderedEvent, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemDeletedEvent, ItemDeleteMode, ItemDeletingEvent, ItemHoldEvent, ItemRenderedEvent, ItemReorderedEvent, ItemSwipeEvent, ListMenuMode, OptionChangedEvent, PageLoadingEvent, PullRefreshEvent, ScrollEvent, SelectAllValueChangedEvent, SelectionChangedEvent } from 'devextreme/ui/list';
+import { ContentReadyEvent, DisposingEvent, dxListItem, GroupRenderedEvent, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemDeletedEvent, ItemDeleteMode, ItemDeletingEvent, ItemHoldEvent, ItemRenderedEvent, ItemReorderedEvent, ItemSwipeEvent, ListMenuMode, OptionChangedEvent, PageLoadingEvent, PullRefreshEvent, ScrollEvent, SelectAllValueChangedEvent, SelectionChangedEvent, SelectionChangingEvent } from 'devextreme/ui/list';
 import { Properties as dxSortableOptions } from 'devextreme/ui/sortable';
 import { Properties as dxTextBoxOptions } from 'devextreme/ui/text_box';
 
@@ -931,6 +931,14 @@ export class DxListComponent<TItem = any, TKey = any> extends DxComponent implem
      */
     @Output() onSelectionChanged: EventEmitter<SelectionChangedEvent>;
 
+    /**
+    
+     * [descr:dxListOptions.onSelectionChanging]
+    
+    
+     */
+    @Output() onSelectionChanging: EventEmitter<SelectionChangingEvent>;
+
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
@@ -1366,6 +1374,7 @@ export class DxListComponent<TItem = any, TKey = any> extends DxComponent implem
             { subscribe: 'scroll', emit: 'onScroll' },
             { subscribe: 'selectAllValueChanged', emit: 'onSelectAllValueChanged' },
             { subscribe: 'selectionChanged', emit: 'onSelectionChanged' },
+            { subscribe: 'selectionChanging', emit: 'onSelectionChanging' },
             { emit: 'accessKeyChange' },
             { emit: 'activeStateEnabledChange' },
             { emit: 'allowItemDeletingChange' },

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

@@ -28,7 +28,7 @@ import { ApplyValueMode, EditorStyle, LabelMode, Mode, PageLoadMode, Position, S
 import { Store } from 'devextreme/data';
 import DataSource, { Options as DataSourceOptions } from 'devextreme/data/data_source';
 import { CollectionWidgetItem } from 'devextreme/ui/collection/ui.collection_widget.base';
-import { ClosedEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, ItemClickEvent, OpenedEvent, OptionChangedEvent, PageLoadingEvent, PullRefreshEvent, ScrollEvent, SelectionChangedEvent, ValueChangedEvent } from 'devextreme/ui/lookup';
+import { ClosedEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, ItemClickEvent, OpenedEvent, OptionChangedEvent, PageLoadingEvent, PullRefreshEvent, ScrollEvent, SelectionChangedEvent, SelectionChangingEvent, ValueChangedEvent } from 'devextreme/ui/lookup';
 import { Properties as dxPopoverOptions } from 'devextreme/ui/popover';
 
 import DxLookup from 'devextreme/ui/lookup';
@@ -1094,6 +1094,14 @@ export class DxLookupComponent extends DxComponent implements OnDestroy, Control
      */
     @Output() onSelectionChanged: EventEmitter<SelectionChangedEvent>;
 
+    /**
+    
+     * [descr:dxLookupOptions.onSelectionChanging]
+    
+    
+     */
+    @Output() onSelectionChanging: EventEmitter<SelectionChangingEvent>;
+
     /**
     
      * [descr:dxLookupOptions.onValueChanged]
@@ -1637,6 +1645,7 @@ export class DxLookupComponent extends DxComponent implements OnDestroy, Control
             { subscribe: 'pullRefresh', emit: 'onPullRefresh' },
             { subscribe: 'scroll', emit: 'onScroll' },
             { subscribe: 'selectionChanged', emit: 'onSelectionChanged' },
+            { subscribe: 'selectionChanging', emit: 'onSelectionChanging' },
             { subscribe: 'valueChanged', emit: 'onValueChanged' },
             { emit: 'accessKeyChange' },
             { emit: 'activeStateEnabledChange' },

packages/devextreme-angular/src/ui/nested/base/tab-panel-options.ts

@@ -8,7 +8,7 @@ import {
 import { Position, TabsIconPosition, TabsStyle } from 'devextreme/common';
 import { Store } from 'devextreme/data';
 import DataSource, { Options as DataSourceOptions } from 'devextreme/data/data_source';
-import { ContentReadyEvent, DisposingEvent, dxTabPanelItem, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent, OptionChangedEvent, SelectionChangedEvent, TitleClickEvent, TitleHoldEvent, TitleRenderedEvent } from 'devextreme/ui/tab_panel';
+import { ContentReadyEvent, DisposingEvent, dxTabPanelItem, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent, OptionChangedEvent, SelectionChangedEvent, SelectionChangingEvent, TitleClickEvent, TitleHoldEvent, TitleRenderedEvent } from 'devextreme/ui/tab_panel';
 
 @Component({
     template: ''
@@ -203,6 +203,13 @@ export abstract class DxoTabPanelOptions extends NestedOption {
         this._setOption('onSelectionChanged', value);
     }
 
+    get onSelectionChanging(): ((e: SelectionChangingEvent) => void) {
+        return this._getOption('onSelectionChanging');
+    }
+    set onSelectionChanging(value: ((e: SelectionChangingEvent) => void)) {
+        this._setOption('onSelectionChanging', value);
+    }
+
     get onTitleClick(): ((e: TitleClickEvent) => void) {
         return this._getOption('onTitleClick');
     }

packages/devextreme-angular/src/ui/nested/tab-panel-options.ts

@@ -60,6 +60,7 @@ import { DxiItemComponent } from './item-dxi';
         'onItemRendered',
         'onOptionChanged',
         'onSelectionChanged',
+        'onSelectionChanging',
         'onTitleClick',
         'onTitleHold',
         'onTitleRendered',

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

@@ -30,7 +30,7 @@ import DataSource, { Options as DataSourceOptions } from 'devextreme/data/data_s
 import { CollectionWidgetItem } from 'devextreme/ui/collection/ui.collection_widget.base';
 import { DropDownPredefinedButton } from 'devextreme/ui/drop_down_editor/ui.drop_down_editor';
 import { Properties as dxPopupOptions } from 'devextreme/ui/popup';
-import { ChangeEvent, ClosedEvent, ContentReadyEvent, CopyEvent, CustomItemCreatingEvent, CutEvent, DisposingEvent, EnterKeyEvent, FocusInEvent, FocusOutEvent, InitializedEvent, InputEvent, ItemClickEvent, KeyDownEvent, KeyUpEvent, OpenedEvent, OptionChangedEvent, PasteEvent, SelectionChangedEvent, ValueChangedEvent } from 'devextreme/ui/select_box';
+import { ChangeEvent, ClosedEvent, ContentReadyEvent, CopyEvent, CustomItemCreatingEvent, CutEvent, DisposingEvent, EnterKeyEvent, FocusInEvent, FocusOutEvent, InitializedEvent, InputEvent, ItemClickEvent, KeyDownEvent, KeyUpEvent, OpenedEvent, OptionChangedEvent, PasteEvent, SelectionChangedEvent, SelectionChangingEvent, ValueChangedEvent } from 'devextreme/ui/select_box';
 
 import DxSelectBox from 'devextreme/ui/select_box';
 
@@ -1041,6 +1041,14 @@ export class DxSelectBoxComponent extends DxComponent implements OnDestroy, Cont
      */
     @Output() onSelectionChanged: EventEmitter<SelectionChangedEvent>;
 
+    /**
+    
+     * [descr:dxSelectBoxOptions.onSelectionChanging]
+    
+    
+     */
+    @Output() onSelectionChanging: EventEmitter<SelectionChangingEvent>;
+
     /**
     
      * [descr:dxSelectBoxOptions.onValueChanged]
@@ -1537,6 +1545,7 @@ export class DxSelectBoxComponent extends DxComponent implements OnDestroy, Cont
             { subscribe: 'optionChanged', emit: 'onOptionChanged' },
             { subscribe: 'paste', emit: 'onPaste' },
             { subscribe: 'selectionChanged', emit: 'onSelectionChanged' },
+            { subscribe: 'selectionChanging', emit: 'onSelectionChanging' },
             { subscribe: 'valueChanged', emit: 'onValueChanged' },
             { emit: 'acceptCustomValueChange' },
             { emit: 'accessKeyChange' },

packages/devextreme-angular/src/ui/tab-panel/index.ts

@@ -26,7 +26,7 @@ export { ExplicitTypes } from 'devextreme/ui/tab_panel';
 import { Position, TabsIconPosition, TabsStyle } from 'devextreme/common';
 import { Store } from 'devextreme/data';
 import DataSource, { Options as DataSourceOptions } from 'devextreme/data/data_source';
-import { ContentReadyEvent, DisposingEvent, dxTabPanelItem, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent, OptionChangedEvent, SelectionChangedEvent, TitleClickEvent, TitleHoldEvent, TitleRenderedEvent } from 'devextreme/ui/tab_panel';
+import { ContentReadyEvent, DisposingEvent, dxTabPanelItem, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent, OptionChangedEvent, SelectionChangedEvent, SelectionChangingEvent, TitleClickEvent, TitleHoldEvent, TitleRenderedEvent } from 'devextreme/ui/tab_panel';
 
 import DxTabPanel from 'devextreme/ui/tab_panel';
 
@@ -538,6 +538,14 @@ export class DxTabPanelComponent<TItem = any, TKey = any> extends DxComponent im
      */
     @Output() onSelectionChanged: EventEmitter<SelectionChangedEvent>;
 
+    /**
+    
+     * [descr:dxTabPanelOptions.onSelectionChanging]
+    
+    
+     */
+    @Output() onSelectionChanging: EventEmitter<SelectionChangingEvent>;
+
     /**
     
      * [descr:dxTabPanelOptions.onTitleClick]
@@ -812,6 +820,7 @@ export class DxTabPanelComponent<TItem = any, TKey = any> extends DxComponent im
             { subscribe: 'itemRendered', emit: 'onItemRendered' },
             { subscribe: 'optionChanged', emit: 'onOptionChanged' },
             { subscribe: 'selectionChanged', emit: 'onSelectionChanged' },
+            { subscribe: 'selectionChanging', emit: 'onSelectionChanging' },
             { subscribe: 'titleClick', emit: 'onTitleClick' },
             { subscribe: 'titleHold', emit: 'onTitleHold' },
             { subscribe: 'titleRendered', emit: 'onTitleRendered' },

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

@@ -26,7 +26,7 @@ export { ExplicitTypes } from 'devextreme/ui/tabs';
 import { Orientation, SingleOrMultiple, TabsIconPosition, TabsStyle } from 'devextreme/common';
 import { Store } from 'devextreme/data';
 import DataSource, { Options as DataSourceOptions } from 'devextreme/data/data_source';
-import { ContentReadyEvent, DisposingEvent, dxTabsItem, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent, OptionChangedEvent, SelectionChangedEvent } from 'devextreme/ui/tabs';
+import { ContentReadyEvent, DisposingEvent, dxTabsItem, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent, OptionChangedEvent, SelectionChangedEvent, SelectionChangingEvent } from 'devextreme/ui/tabs';
 
 import DxTabs from 'devextreme/ui/tabs';
 
@@ -512,6 +512,14 @@ export class DxTabsComponent<TItem = any, TKey = any> extends DxComponent implem
      */
     @Output() onSelectionChanged: EventEmitter<SelectionChangedEvent>;
 
+    /**
+    
+     * [descr:dxTabsOptions.onSelectionChanging]
+    
+    
+     */
+    @Output() onSelectionChanging: EventEmitter<SelectionChangingEvent>;
+
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
@@ -748,6 +756,7 @@ export class DxTabsComponent<TItem = any, TKey = any> extends DxComponent implem
             { subscribe: 'itemRendered', emit: 'onItemRendered' },
             { subscribe: 'optionChanged', emit: 'onOptionChanged' },
             { subscribe: 'selectionChanged', emit: 'onSelectionChanged' },
+            { subscribe: 'selectionChanging', emit: 'onSelectionChanging' },
             { emit: 'accessKeyChange' },
             { emit: 'dataSourceChange' },
             { emit: 'disabledChange' },

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

@@ -30,7 +30,7 @@ import DataSource, { Options as DataSourceOptions } from 'devextreme/data/data_s
 import { CollectionWidgetItem } from 'devextreme/ui/collection/ui.collection_widget.base';
 import { DropDownPredefinedButton } from 'devextreme/ui/drop_down_editor/ui.drop_down_editor';
 import { Properties as dxPopupOptions } from 'devextreme/ui/popup';
-import { ChangeEvent, ClosedEvent, ContentReadyEvent, CustomItemCreatingEvent, DisposingEvent, EnterKeyEvent, FocusInEvent, FocusOutEvent, InitializedEvent, InputEvent, ItemClickEvent, KeyDownEvent, KeyUpEvent, MultiTagPreparingEvent, OpenedEvent, OptionChangedEvent, SelectAllValueChangedEvent, SelectionChangedEvent, ValueChangedEvent } from 'devextreme/ui/tag_box';
+import { ChangeEvent, ClosedEvent, ContentReadyEvent, CustomItemCreatingEvent, DisposingEvent, EnterKeyEvent, FocusInEvent, FocusOutEvent, InitializedEvent, InputEvent, ItemClickEvent, KeyDownEvent, KeyUpEvent, MultiTagPreparingEvent, OpenedEvent, OptionChangedEvent, SelectAllValueChangedEvent, SelectionChangedEvent, SelectionChangingEvent, ValueChangedEvent } from 'devextreme/ui/tag_box';
 
 import DxTagBox from 'devextreme/ui/tag_box';
 
@@ -1124,6 +1124,14 @@ export class DxTagBoxComponent extends DxComponent implements OnDestroy, Control
      */
     @Output() onSelectionChanged: EventEmitter<SelectionChangedEvent>;
 
+    /**
+    
+     * [descr:dxTagBoxOptions.onSelectionChanging]
+    
+    
+     */
+    @Output() onSelectionChanging: EventEmitter<SelectionChangingEvent>;
+
     /**
     
      * [descr:dxTagBoxOptions.onValueChanged]
@@ -1668,6 +1676,7 @@ export class DxTagBoxComponent extends DxComponent implements OnDestroy, Control
             { subscribe: 'optionChanged', emit: 'onOptionChanged' },
             { subscribe: 'selectAllValueChanged', emit: 'onSelectAllValueChanged' },
             { subscribe: 'selectionChanged', emit: 'onSelectionChanged' },
+            { subscribe: 'selectionChanging', emit: 'onSelectionChanging' },
             { subscribe: 'valueChanged', emit: 'onValueChanged' },
             { emit: 'acceptCustomValueChange' },
             { emit: 'accessKeyChange' },

packages/devextreme-react/src/autocomplete.ts

@@ -8,7 +8,7 @@ import dxAutocomplete, {
 import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
 import NestedOption from "./core/nested-option";
 
-import type { ChangeEvent, ClosedEvent, ContentReadyEvent, CopyEvent, CutEvent, DisposingEvent, EnterKeyEvent, FocusInEvent, FocusOutEvent, InitializedEvent, InputEvent, ItemClickEvent, KeyDownEvent, KeyUpEvent, OpenedEvent, PasteEvent, ValueChangedEvent } from "devextreme/ui/autocomplete";
+import type { ChangeEvent, ClosedEvent, ContentReadyEvent, CopyEvent, CutEvent, DisposingEvent, EnterKeyEvent, FocusInEvent, FocusOutEvent, InitializedEvent, InputEvent, ItemClickEvent, KeyDownEvent, KeyUpEvent, OpenedEvent, PasteEvent, SelectionChangingEvent, ValueChangedEvent } from "devextreme/ui/autocomplete";
 import type { ContentReadyEvent as ButtonContentReadyEvent, DisposingEvent as ButtonDisposingEvent, InitializedEvent as ButtonInitializedEvent, dxButtonOptions, ClickEvent, OptionChangedEvent } from "devextreme/ui/button";
 import type { AnimationConfig, AnimationState } from "devextreme/animation/fx";
 import type { event, EventInfo } from "devextreme/events/index";
@@ -43,6 +43,7 @@ type IAutocompleteOptionsNarrowedEvents = {
   onKeyUp?: ((e: KeyUpEvent) => void);
   onOpened?: ((e: OpenedEvent) => void);
   onPaste?: ((e: PasteEvent) => void);
+  onSelectionChanging?: ((e: SelectionChangingEvent) => void);
   onValueChanged?: ((e: ValueChangedEvent) => void);
 }
 
@@ -77,7 +78,7 @@ const Autocomplete = memo(
       ), [baseRef.current]);
 
       const subscribableOptions = useMemo(() => (["opened","value"]), []);
-      const independentEvents = useMemo(() => (["onChange","onClosed","onContentReady","onCopy","onCut","onDisposing","onEnterKey","onFocusIn","onFocusOut","onInitialized","onInput","onItemClick","onKeyDown","onKeyUp","onOpened","onPaste","onValueChanged"]), []);
+      const independentEvents = useMemo(() => (["onChange","onClosed","onContentReady","onCopy","onCut","onDisposing","onEnterKey","onFocusIn","onFocusOut","onInitialized","onInput","onItemClick","onKeyDown","onKeyUp","onOpened","onPaste","onSelectionChanging","onValueChanged"]), []);
 
       const defaults = useMemo(() => ({
         defaultOpened: "opened",

packages/devextreme-react/src/form.ts

@@ -10,7 +10,7 @@ import NestedOption from "./core/nested-option";
 
 import type { ContentReadyEvent, DisposingEvent, EditorEnterKeyEvent, InitializedEvent, dxFormButtonItem, dxFormEmptyItem, dxFormGroupItem, dxFormSimpleItem, dxFormTabbedItem } from "devextreme/ui/form";
 import type { ContentReadyEvent as ButtonContentReadyEvent, DisposingEvent as ButtonDisposingEvent, InitializedEvent as ButtonInitializedEvent, dxButtonOptions, ClickEvent, OptionChangedEvent } from "devextreme/ui/button";
-import type { ContentReadyEvent as TabPanelContentReadyEvent, DisposingEvent as TabPanelDisposingEvent, InitializedEvent as TabPanelInitializedEvent, OptionChangedEvent as TabPanelOptionChangedEvent, dxTabPanelOptions, dxTabPanelItem, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent, SelectionChangedEvent, TitleClickEvent, TitleHoldEvent, TitleRenderedEvent } from "devextreme/ui/tab_panel";
+import type { ContentReadyEvent as TabPanelContentReadyEvent, DisposingEvent as TabPanelDisposingEvent, InitializedEvent as TabPanelInitializedEvent, OptionChangedEvent as TabPanelOptionChangedEvent, dxTabPanelOptions, dxTabPanelItem, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent, SelectionChangedEvent, SelectionChangingEvent, TitleClickEvent, TitleHoldEvent, TitleRenderedEvent } from "devextreme/ui/tab_panel";
 import type { template } from "devextreme/core/templates/template";
 import type { CollectionWidgetItem } from "devextreme/ui/collection/ui.collection_widget.base";
 import type { DataSourceOptions } from "devextreme/data/data_source";
@@ -764,6 +764,7 @@ type ITabPanelOptionsProps = React.PropsWithChildren<{
   onItemRendered?: ((e: ItemRenderedEvent) => void);
   onOptionChanged?: ((e: TabPanelOptionChangedEvent) => void);
   onSelectionChanged?: ((e: SelectionChangedEvent) => void);
+  onSelectionChanging?: ((e: SelectionChangingEvent) => void);
   onTitleClick?: ((e: TitleClickEvent) => void);
   onTitleHold?: ((e: TitleHoldEvent) => void);
   onTitleRendered?: ((e: TitleRenderedEvent) => void);