diff --git a/packages/devextreme-angular/src/ui/autocomplete/index.ts b/packages/devextreme-angular/src/ui/autocomplete/index.ts
index bb22a38ccd46..311354cee369 100644
--- a/packages/devextreme-angular/src/ui/autocomplete/index.ts
+++ b/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' },
diff --git a/packages/devextreme-angular/src/ui/list/index.ts b/packages/devextreme-angular/src/ui/list/index.ts
index cb53039211c1..c73b775077ce 100644
--- a/packages/devextreme-angular/src/ui/list/index.ts
+++ b/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' },
diff --git a/packages/devextreme-angular/src/ui/lookup/index.ts b/packages/devextreme-angular/src/ui/lookup/index.ts
index 9d205908d5df..3966b99f5250 100644
--- a/packages/devextreme-angular/src/ui/lookup/index.ts
+++ b/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' },
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 40950dcb0809..b941b65a2472 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
@@ -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');
     }
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 ad901b19326e..6a8120be1511 100644
--- a/packages/devextreme-angular/src/ui/nested/tab-panel-options.ts
+++ b/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',
diff --git a/packages/devextreme-angular/src/ui/select-box/index.ts b/packages/devextreme-angular/src/ui/select-box/index.ts
index 4ea8370fbf29..845949ccea9c 100644
--- a/packages/devextreme-angular/src/ui/select-box/index.ts
+++ b/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' },
diff --git a/packages/devextreme-angular/src/ui/tab-panel/index.ts b/packages/devextreme-angular/src/ui/tab-panel/index.ts
index c1908d072cc2..d76e3bc850a4 100644
--- a/packages/devextreme-angular/src/ui/tab-panel/index.ts
+++ b/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' },
diff --git a/packages/devextreme-angular/src/ui/tabs/index.ts b/packages/devextreme-angular/src/ui/tabs/index.ts
index 98ebde4ef0d6..aaac3c19b380 100644
--- a/packages/devextreme-angular/src/ui/tabs/index.ts
+++ b/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' },
diff --git a/packages/devextreme-angular/src/ui/tag-box/index.ts b/packages/devextreme-angular/src/ui/tag-box/index.ts
index d129db1e9ef8..3d417ac3fff3 100644
--- a/packages/devextreme-angular/src/ui/tag-box/index.ts
+++ b/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' },
diff --git a/packages/devextreme-react/src/autocomplete.ts b/packages/devextreme-react/src/autocomplete.ts
index 4d7323a6db0c..d72f79a32628 100644
--- a/packages/devextreme-react/src/autocomplete.ts
+++ b/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",
diff --git a/packages/devextreme-react/src/form.ts b/packages/devextreme-react/src/form.ts
index 7d3c196f840c..e8dea8d25657 100644
--- a/packages/devextreme-react/src/form.ts
+++ b/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);
diff --git a/packages/devextreme-react/src/list.ts b/packages/devextreme-react/src/list.ts
index 95bc016f74cf..13efbd6cd6f4 100644
--- a/packages/devextreme-react/src/list.ts
+++ b/packages/devextreme-react/src/list.ts
@@ -9,7 +9,7 @@ import dxList, {
 import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
 import NestedOption from "./core/nested-option";
 
-import type { dxListItem, ContentReadyEvent, DisposingEvent, GroupRenderedEvent, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemDeletedEvent, ItemDeletingEvent, ItemHoldEvent, ItemRenderedEvent, ItemReorderedEvent, ItemSwipeEvent, PageLoadingEvent, PullRefreshEvent, ScrollEvent, SelectAllValueChangedEvent } from "devextreme/ui/list";
+import type { dxListItem, ContentReadyEvent, DisposingEvent, GroupRenderedEvent, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemDeletedEvent, ItemDeletingEvent, ItemHoldEvent, ItemRenderedEvent, ItemReorderedEvent, ItemSwipeEvent, PageLoadingEvent, PullRefreshEvent, ScrollEvent, SelectAllValueChangedEvent, SelectionChangingEvent } from "devextreme/ui/list";
 import type { ContentReadyEvent as ButtonContentReadyEvent, DisposingEvent as ButtonDisposingEvent, InitializedEvent as ButtonInitializedEvent, dxButtonOptions, OptionChangedEvent as ButtonOptionChangedEvent, ClickEvent } from "devextreme/ui/button";
 import type { ContentReadyEvent as TextBoxContentReadyEvent, DisposingEvent as TextBoxDisposingEvent, InitializedEvent as TextBoxInitializedEvent, OptionChangedEvent as TextBoxOptionChangedEvent, ChangeEvent, CopyEvent, CutEvent, EnterKeyEvent, FocusInEvent, FocusOutEvent, InputEvent, KeyDownEvent, KeyUpEvent, PasteEvent, ValueChangedEvent } from "devextreme/ui/text_box";
 import type { DisposingEvent as SortableDisposingEvent, InitializedEvent as SortableInitializedEvent, AddEvent, DragChangeEvent, DragEndEvent, DragMoveEvent, DragStartEvent, OptionChangedEvent, RemoveEvent, ReorderEvent } from "devextreme/ui/sortable";
@@ -38,6 +38,7 @@ type IListOptionsNarrowedEvents<TItem = any, TKey = any> = {
   onPullRefresh?: ((e: PullRefreshEvent<TItem, TKey>) => void);
   onScroll?: ((e: ScrollEvent<TItem, TKey>) => void);
   onSelectAllValueChanged?: ((e: SelectAllValueChangedEvent<TItem, TKey>) => void);
+  onSelectionChanging?: ((e: SelectionChangingEvent<TItem, TKey>) => void);
 }
 
 type IListOptions<TItem = any, TKey = any> = React.PropsWithChildren<ReplaceFieldTypes<Properties<TItem, TKey>, IListOptionsNarrowedEvents<TItem, TKey>> & IHtmlOptions & {
@@ -72,7 +73,7 @@ const List = memo(
       ), [baseRef.current]);
 
       const subscribableOptions = useMemo(() => (["items","selectedItemKeys","selectedItems"]), []);
-      const independentEvents = useMemo(() => (["onContentReady","onDisposing","onGroupRendered","onInitialized","onItemClick","onItemContextMenu","onItemDeleted","onItemDeleting","onItemHold","onItemRendered","onItemReordered","onItemSwipe","onPageLoading","onPullRefresh","onScroll","onSelectAllValueChanged"]), []);
+      const independentEvents = useMemo(() => (["onContentReady","onDisposing","onGroupRendered","onInitialized","onItemClick","onItemContextMenu","onItemDeleted","onItemDeleting","onItemHold","onItemRendered","onItemReordered","onItemSwipe","onPageLoading","onPullRefresh","onScroll","onSelectAllValueChanged","onSelectionChanging"]), []);
 
       const defaults = useMemo(() => ({
         defaultItems: "items",
diff --git a/packages/devextreme-react/src/lookup.ts b/packages/devextreme-react/src/lookup.ts
index 818ae3e69604..6cc9d9143844 100644
--- a/packages/devextreme-react/src/lookup.ts
+++ b/packages/devextreme-react/src/lookup.ts
@@ -8,7 +8,7 @@ import dxLookup, {
 import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
 import NestedOption from "./core/nested-option";
 
-import type { ClosedEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, ItemClickEvent, OpenedEvent, PageLoadingEvent, PullRefreshEvent, ScrollEvent, ValueChangedEvent } from "devextreme/ui/lookup";
+import type { ClosedEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, ItemClickEvent, OpenedEvent, PageLoadingEvent, PullRefreshEvent, ScrollEvent, SelectionChangingEvent, ValueChangedEvent } from "devextreme/ui/lookup";
 import type { ContentReadyEvent as PopoverContentReadyEvent, DisposingEvent as PopoverDisposingEvent, InitializedEvent as PopoverInitializedEvent, HiddenEvent, HidingEvent, OptionChangedEvent, ShowingEvent, ShownEvent, TitleRenderedEvent } from "devextreme/ui/popover";
 import type { AnimationConfig, AnimationState } from "devextreme/animation/fx";
 import type { event } from "devextreme/events/index";
@@ -31,6 +31,7 @@ type ILookupOptionsNarrowedEvents = {
   onPageLoading?: ((e: PageLoadingEvent) => void);
   onPullRefresh?: ((e: PullRefreshEvent) => void);
   onScroll?: ((e: ScrollEvent) => void);
+  onSelectionChanging?: ((e: SelectionChangingEvent) => void);
   onValueChanged?: ((e: ValueChangedEvent) => void);
 }
 
@@ -65,7 +66,7 @@ const Lookup = memo(
       ), [baseRef.current]);
 
       const subscribableOptions = useMemo(() => (["opened","value"]), []);
-      const independentEvents = useMemo(() => (["onClosed","onContentReady","onDisposing","onInitialized","onItemClick","onOpened","onPageLoading","onPullRefresh","onScroll","onValueChanged"]), []);
+      const independentEvents = useMemo(() => (["onClosed","onContentReady","onDisposing","onInitialized","onItemClick","onOpened","onPageLoading","onPullRefresh","onScroll","onSelectionChanging","onValueChanged"]), []);
 
       const defaults = useMemo(() => ({
         defaultOpened: "opened",
diff --git a/packages/devextreme-react/src/select-box.ts b/packages/devextreme-react/src/select-box.ts
index 424cc5ebf226..296422dbe18c 100644
--- a/packages/devextreme-react/src/select-box.ts
+++ b/packages/devextreme-react/src/select-box.ts
@@ -8,7 +8,7 @@ import dxSelectBox, {
 import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
 import NestedOption from "./core/nested-option";
 
-import type { ChangeEvent, ClosedEvent, ContentReadyEvent, CopyEvent, CustomItemCreatingEvent, CutEvent, DisposingEvent, EnterKeyEvent, FocusInEvent, FocusOutEvent, InitializedEvent, InputEvent, ItemClickEvent, KeyDownEvent, KeyUpEvent, OpenedEvent, PasteEvent, ValueChangedEvent } from "devextreme/ui/select_box";
+import type { ChangeEvent, ClosedEvent, ContentReadyEvent, CopyEvent, CustomItemCreatingEvent, CutEvent, DisposingEvent, EnterKeyEvent, FocusInEvent, FocusOutEvent, InitializedEvent, InputEvent, ItemClickEvent, KeyDownEvent, KeyUpEvent, OpenedEvent, PasteEvent, SelectionChangingEvent, ValueChangedEvent } from "devextreme/ui/select_box";
 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";
@@ -44,6 +44,7 @@ type ISelectBoxOptionsNarrowedEvents = {
   onKeyUp?: ((e: KeyUpEvent) => void);
   onOpened?: ((e: OpenedEvent) => void);
   onPaste?: ((e: PasteEvent) => void);
+  onSelectionChanging?: ((e: SelectionChangingEvent) => void);
   onValueChanged?: ((e: ValueChangedEvent) => void);
 }
 
@@ -80,7 +81,7 @@ const SelectBox = memo(
       ), [baseRef.current]);
 
       const subscribableOptions = useMemo(() => (["opened","value"]), []);
-      const independentEvents = useMemo(() => (["onChange","onClosed","onContentReady","onCopy","onCustomItemCreating","onCut","onDisposing","onEnterKey","onFocusIn","onFocusOut","onInitialized","onInput","onItemClick","onKeyDown","onKeyUp","onOpened","onPaste","onValueChanged"]), []);
+      const independentEvents = useMemo(() => (["onChange","onClosed","onContentReady","onCopy","onCustomItemCreating","onCut","onDisposing","onEnterKey","onFocusIn","onFocusOut","onInitialized","onInput","onItemClick","onKeyDown","onKeyUp","onOpened","onPaste","onSelectionChanging","onValueChanged"]), []);
 
       const defaults = useMemo(() => ({
         defaultOpened: "opened",
diff --git a/packages/devextreme-react/src/tab-panel.ts b/packages/devextreme-react/src/tab-panel.ts
index d68494f4067c..c78fddb79a6a 100644
--- a/packages/devextreme-react/src/tab-panel.ts
+++ b/packages/devextreme-react/src/tab-panel.ts
@@ -9,7 +9,7 @@ import dxTabPanel, {
 import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
 import NestedOption from "./core/nested-option";
 
-import type { dxTabPanelItem, ContentReadyEvent, DisposingEvent, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent, TitleClickEvent, TitleHoldEvent, TitleRenderedEvent } from "devextreme/ui/tab_panel";
+import type { dxTabPanelItem, ContentReadyEvent, DisposingEvent, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent, 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";
 
@@ -25,6 +25,7 @@ type ITabPanelOptionsNarrowedEvents<TItem = any, TKey = any> = {
   onItemContextMenu?: ((e: ItemContextMenuEvent<TItem, TKey>) => void);
   onItemHold?: ((e: ItemHoldEvent<TItem, TKey>) => void);
   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);
@@ -62,7 +63,7 @@ const TabPanel = memo(
       ), [baseRef.current]);
 
       const subscribableOptions = useMemo(() => (["items","selectedIndex","selectedItem"]), []);
-      const independentEvents = useMemo(() => (["onContentReady","onDisposing","onInitialized","onItemClick","onItemContextMenu","onItemHold","onItemRendered","onTitleClick","onTitleHold","onTitleRendered"]), []);
+      const independentEvents = useMemo(() => (["onContentReady","onDisposing","onInitialized","onItemClick","onItemContextMenu","onItemHold","onItemRendered","onSelectionChanging","onTitleClick","onTitleHold","onTitleRendered"]), []);
 
       const defaults = useMemo(() => ({
         defaultItems: "items",
diff --git a/packages/devextreme-react/src/tabs.ts b/packages/devextreme-react/src/tabs.ts
index 08eff1ccde5c..2266296b530e 100644
--- a/packages/devextreme-react/src/tabs.ts
+++ b/packages/devextreme-react/src/tabs.ts
@@ -9,7 +9,7 @@ import dxTabs, {
 import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
 import NestedOption from "./core/nested-option";
 
-import type { dxTabsItem, ContentReadyEvent, DisposingEvent, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent } from "devextreme/ui/tabs";
+import type { dxTabsItem, ContentReadyEvent, DisposingEvent, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent, SelectionChangingEvent } from "devextreme/ui/tabs";
 import type { CollectionWidgetItem } from "devextreme/ui/collection/ui.collection_widget.base";
 import type { template } from "devextreme/core/templates/template";
 
@@ -25,6 +25,7 @@ type ITabsOptionsNarrowedEvents<TItem = any, TKey = any> = {
   onItemContextMenu?: ((e: ItemContextMenuEvent<TItem, TKey>) => void);
   onItemHold?: ((e: ItemHoldEvent<TItem, TKey>) => void);
   onItemRendered?: ((e: ItemRenderedEvent<TItem, TKey>) => void);
+  onSelectionChanging?: ((e: SelectionChangingEvent<TItem, TKey>) => void);
 }
 
 type ITabsOptions<TItem = any, TKey = any> = React.PropsWithChildren<ReplaceFieldTypes<Properties<TItem, TKey>, ITabsOptionsNarrowedEvents<TItem, TKey>> & IHtmlOptions & {
@@ -61,7 +62,7 @@ const Tabs = memo(
       ), [baseRef.current]);
 
       const subscribableOptions = useMemo(() => (["items","selectedIndex","selectedItem","selectedItemKeys","selectedItems"]), []);
-      const independentEvents = useMemo(() => (["onContentReady","onDisposing","onInitialized","onItemClick","onItemContextMenu","onItemHold","onItemRendered"]), []);
+      const independentEvents = useMemo(() => (["onContentReady","onDisposing","onInitialized","onItemClick","onItemContextMenu","onItemHold","onItemRendered","onSelectionChanging"]), []);
 
       const defaults = useMemo(() => ({
         defaultItems: "items",
diff --git a/packages/devextreme-react/src/tag-box.ts b/packages/devextreme-react/src/tag-box.ts
index f55e2a8e3b18..4da9d85fbdd6 100644
--- a/packages/devextreme-react/src/tag-box.ts
+++ b/packages/devextreme-react/src/tag-box.ts
@@ -8,7 +8,7 @@ import dxTagBox, {
 import { Component as BaseComponent, IHtmlOptions, ComponentRef, IElementDescriptor } from "./core/component";
 import NestedOption from "./core/nested-option";
 
-import type { ChangeEvent, ClosedEvent, ContentReadyEvent, CustomItemCreatingEvent, DisposingEvent, EnterKeyEvent, FocusInEvent, FocusOutEvent, InitializedEvent, InputEvent, ItemClickEvent, KeyDownEvent, KeyUpEvent, MultiTagPreparingEvent, OpenedEvent, SelectAllValueChangedEvent, ValueChangedEvent } from "devextreme/ui/tag_box";
+import type { ChangeEvent, ClosedEvent, ContentReadyEvent, CustomItemCreatingEvent, DisposingEvent, EnterKeyEvent, FocusInEvent, FocusOutEvent, InitializedEvent, InputEvent, ItemClickEvent, KeyDownEvent, KeyUpEvent, MultiTagPreparingEvent, OpenedEvent, SelectAllValueChangedEvent, SelectionChangingEvent, ValueChangedEvent } from "devextreme/ui/tag_box";
 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 ITagBoxOptionsNarrowedEvents = {
   onMultiTagPreparing?: ((e: MultiTagPreparingEvent) => void);
   onOpened?: ((e: OpenedEvent) => void);
   onSelectAllValueChanged?: ((e: SelectAllValueChangedEvent) => void);
+  onSelectionChanging?: ((e: SelectionChangingEvent) => void);
   onValueChanged?: ((e: ValueChangedEvent) => void);
 }
 
@@ -81,7 +82,7 @@ const TagBox = memo(
       ), [baseRef.current]);
 
       const subscribableOptions = useMemo(() => (["opened","value"]), []);
-      const independentEvents = useMemo(() => (["onChange","onClosed","onContentReady","onCustomItemCreating","onDisposing","onEnterKey","onFocusIn","onFocusOut","onInitialized","onInput","onItemClick","onKeyDown","onKeyUp","onMultiTagPreparing","onOpened","onSelectAllValueChanged","onValueChanged"]), []);
+      const independentEvents = useMemo(() => (["onChange","onClosed","onContentReady","onCustomItemCreating","onDisposing","onEnterKey","onFocusIn","onFocusOut","onInitialized","onInput","onItemClick","onKeyDown","onKeyUp","onMultiTagPreparing","onOpened","onSelectAllValueChanged","onSelectionChanging","onValueChanged"]), []);
 
       const defaults = useMemo(() => ({
         defaultOpened: "opened",
diff --git a/packages/devextreme-vue/src/autocomplete.ts b/packages/devextreme-vue/src/autocomplete.ts
index a49c22d07702..d6e17d190c79 100644
--- a/packages/devextreme-vue/src/autocomplete.ts
+++ b/packages/devextreme-vue/src/autocomplete.ts
@@ -48,6 +48,7 @@ type AccessibleOptions = Pick<Properties,
   "onOptionChanged" |
   "onPaste" |
   "onSelectionChanged" |
+  "onSelectionChanging" |
   "onValueChanged" |
   "opened" |
   "openOnFieldClick" |
@@ -128,6 +129,7 @@ const DxAutocomplete = createComponent({
     onOptionChanged: Function,
     onPaste: Function,
     onSelectionChanged: Function,
+    onSelectionChanging: Function,
     onValueChanged: Function,
     opened: Boolean,
     openOnFieldClick: Boolean,
@@ -205,6 +207,7 @@ const DxAutocomplete = createComponent({
     "update:onOptionChanged": null,
     "update:onPaste": null,
     "update:onSelectionChanged": null,
+    "update:onSelectionChanging": null,
     "update:onValueChanged": null,
     "update:opened": null,
     "update:openOnFieldClick": null,
diff --git a/packages/devextreme-vue/src/form.ts b/packages/devextreme-vue/src/form.ts
index ae5173f21888..86e3da2c996c 100644
--- a/packages/devextreme-vue/src/form.ts
+++ b/packages/devextreme-vue/src/form.ts
@@ -776,6 +776,7 @@ const DxTabPanelOptions = createConfigurationComponent({
     "update:onItemRendered": null,
     "update:onOptionChanged": null,
     "update:onSelectionChanged": null,
+    "update:onSelectionChanging": null,
     "update:onTitleClick": null,
     "update:onTitleHold": null,
     "update:onTitleRendered": null,
@@ -822,6 +823,7 @@ const DxTabPanelOptions = createConfigurationComponent({
     onItemRendered: Function,
     onOptionChanged: Function,
     onSelectionChanged: Function,
+    onSelectionChanging: Function,
     onTitleClick: Function,
     onTitleHold: Function,
     onTitleRendered: Function,
diff --git a/packages/devextreme-vue/src/list.ts b/packages/devextreme-vue/src/list.ts
index e6dfe2c98b28..73796f11b50e 100644
--- a/packages/devextreme-vue/src/list.ts
+++ b/packages/devextreme-vue/src/list.ts
@@ -48,6 +48,7 @@ type AccessibleOptions = Pick<Properties,
   "onScroll" |
   "onSelectAllValueChanged" |
   "onSelectionChanged" |
+  "onSelectionChanging" |
   "pageLoadingText" |
   "pageLoadMode" |
   "pulledDownText" |
@@ -128,6 +129,7 @@ const DxList = createComponent({
     onScroll: Function,
     onSelectAllValueChanged: Function,
     onSelectionChanged: Function,
+    onSelectionChanging: Function,
     pageLoadingText: String,
     pageLoadMode: String,
     pulledDownText: String,
@@ -205,6 +207,7 @@ const DxList = createComponent({
     "update:onScroll": null,
     "update:onSelectAllValueChanged": null,
     "update:onSelectionChanged": null,
+    "update:onSelectionChanging": null,
     "update:pageLoadingText": null,
     "update:pageLoadMode": null,
     "update:pulledDownText": null,
diff --git a/packages/devextreme-vue/src/lookup.ts b/packages/devextreme-vue/src/lookup.ts
index 9e6c45d0aabd..0837ea56edf1 100644
--- a/packages/devextreme-vue/src/lookup.ts
+++ b/packages/devextreme-vue/src/lookup.ts
@@ -48,6 +48,7 @@ type AccessibleOptions = Pick<Properties,
   "onPullRefresh" |
   "onScroll" |
   "onSelectionChanged" |
+  "onSelectionChanging" |
   "onValueChanged" |
   "opened" |
   "pageLoadingText" |
@@ -137,6 +138,7 @@ const DxLookup = createComponent({
     onPullRefresh: Function,
     onScroll: Function,
     onSelectionChanged: Function,
+    onSelectionChanging: Function,
     onValueChanged: Function,
     opened: Boolean,
     pageLoadingText: String,
@@ -223,6 +225,7 @@ const DxLookup = createComponent({
     "update:onPullRefresh": null,
     "update:onScroll": null,
     "update:onSelectionChanged": null,
+    "update:onSelectionChanging": null,
     "update:onValueChanged": null,
     "update:opened": null,
     "update:pageLoadingText": null,
diff --git a/packages/devextreme-vue/src/select-box.ts b/packages/devextreme-vue/src/select-box.ts
index 85087859b0bf..93b31de58ea3 100644
--- a/packages/devextreme-vue/src/select-box.ts
+++ b/packages/devextreme-vue/src/select-box.ts
@@ -53,6 +53,7 @@ type AccessibleOptions = Pick<Properties,
   "onOptionChanged" |
   "onPaste" |
   "onSelectionChanged" |
+  "onSelectionChanging" |
   "onValueChanged" |
   "opened" |
   "openOnFieldClick" |
@@ -141,6 +142,7 @@ const DxSelectBox = createComponent({
     onOptionChanged: Function,
     onPaste: Function,
     onSelectionChanged: Function,
+    onSelectionChanging: Function,
     onValueChanged: Function,
     opened: Boolean,
     openOnFieldClick: Boolean,
@@ -226,6 +228,7 @@ const DxSelectBox = createComponent({
     "update:onOptionChanged": null,
     "update:onPaste": null,
     "update:onSelectionChanged": null,
+    "update:onSelectionChanging": null,
     "update:onValueChanged": null,
     "update:opened": null,
     "update:openOnFieldClick": null,
diff --git a/packages/devextreme-vue/src/tab-panel.ts b/packages/devextreme-vue/src/tab-panel.ts
index 3253e69ed8d7..4cd3420a305a 100644
--- a/packages/devextreme-vue/src/tab-panel.ts
+++ b/packages/devextreme-vue/src/tab-panel.ts
@@ -31,6 +31,7 @@ type AccessibleOptions = Pick<Properties,
   "onItemRendered" |
   "onOptionChanged" |
   "onSelectionChanged" |
+  "onSelectionChanging" |
   "onTitleClick" |
   "onTitleHold" |
   "onTitleRendered" |
@@ -81,6 +82,7 @@ const DxTabPanel = createComponent({
     onItemRendered: Function,
     onOptionChanged: Function,
     onSelectionChanged: Function,
+    onSelectionChanging: Function,
     onTitleClick: Function,
     onTitleHold: Function,
     onTitleRendered: Function,
@@ -128,6 +130,7 @@ const DxTabPanel = createComponent({
     "update:onItemRendered": null,
     "update:onOptionChanged": null,
     "update:onSelectionChanged": null,
+    "update:onSelectionChanging": null,
     "update:onTitleClick": null,
     "update:onTitleHold": null,
     "update:onTitleRendered": null,
diff --git a/packages/devextreme-vue/src/tabs.ts b/packages/devextreme-vue/src/tabs.ts
index 8778ab39ead4..cedc1f7ef81c 100644
--- a/packages/devextreme-vue/src/tabs.ts
+++ b/packages/devextreme-vue/src/tabs.ts
@@ -27,6 +27,7 @@ type AccessibleOptions = Pick<Properties,
   "onItemRendered" |
   "onOptionChanged" |
   "onSelectionChanged" |
+  "onSelectionChanging" |
   "orientation" |
   "repaintChangesOnly" |
   "rtlEnabled" |
@@ -72,6 +73,7 @@ const DxTabs = createComponent({
     onItemRendered: Function,
     onOptionChanged: Function,
     onSelectionChanged: Function,
+    onSelectionChanging: Function,
     orientation: String,
     repaintChangesOnly: Boolean,
     rtlEnabled: Boolean,
@@ -114,6 +116,7 @@ const DxTabs = createComponent({
     "update:onItemRendered": null,
     "update:onOptionChanged": null,
     "update:onSelectionChanged": null,
+    "update:onSelectionChanging": null,
     "update:orientation": null,
     "update:repaintChangesOnly": null,
     "update:rtlEnabled": null,
diff --git a/packages/devextreme-vue/src/tag-box.ts b/packages/devextreme-vue/src/tag-box.ts
index a30d26880c60..0850f974ddcd 100644
--- a/packages/devextreme-vue/src/tag-box.ts
+++ b/packages/devextreme-vue/src/tag-box.ts
@@ -56,6 +56,7 @@ type AccessibleOptions = Pick<Properties,
   "onOptionChanged" |
   "onSelectAllValueChanged" |
   "onSelectionChanged" |
+  "onSelectionChanging" |
   "onValueChanged" |
   "opened" |
   "openOnFieldClick" |
@@ -150,6 +151,7 @@ const DxTagBox = createComponent({
     onOptionChanged: Function,
     onSelectAllValueChanged: Function,
     onSelectionChanged: Function,
+    onSelectionChanging: Function,
     onValueChanged: Function,
     opened: Boolean,
     openOnFieldClick: Boolean,
@@ -241,6 +243,7 @@ const DxTagBox = createComponent({
     "update:onOptionChanged": null,
     "update:onSelectAllValueChanged": null,
     "update:onSelectionChanged": null,
+    "update:onSelectionChanging": null,
     "update:onValueChanged": null,
     "update:opened": null,
     "update:openOnFieldClick": null,
diff --git a/packages/devextreme/js/__internal/ui/collection/m_collection_widget.edit.ts b/packages/devextreme/js/__internal/ui/collection/m_collection_widget.edit.ts
index 6548f47f0a2a..6afe3abf47c5 100644
--- a/packages/devextreme/js/__internal/ui/collection/m_collection_widget.edit.ts
+++ b/packages/devextreme/js/__internal/ui/collection/m_collection_widget.edit.ts
@@ -557,8 +557,8 @@ const CollectionWidget = BaseCollectionWidget.inherit({
       case 'selectionRequired':
         this._normalizeSelectedItems();
         break;
-      case 'onSelectionChanged':
       case 'onSelectionChanging':
+      case 'onSelectionChanged':
         this._initActions();
         break;
       case 'selectByClick':
diff --git a/packages/devextreme/js/events/index.d.ts b/packages/devextreme/js/events/index.d.ts
index 1e16e4d1e6da..999a80e69b94 100644
--- a/packages/devextreme/js/events/index.d.ts
+++ b/packages/devextreme/js/events/index.d.ts
@@ -109,6 +109,18 @@ export interface Cancelable {
     cancel?: boolean;
 }
 
+/**
+ * @docid
+ * @public
+ */
+export type AsyncCancelable = {
+    /**
+     * @docid
+     * @type boolean|Promise<boolean>
+     */
+    cancel: boolean | PromiseLike<boolean>;
+};
+
 /** @deprecated EventObject */
 export type dxEvent = EventObject;
 
diff --git a/packages/devextreme/js/ui/accordion.d.ts b/packages/devextreme/js/ui/accordion.d.ts
index fe39beb0546c..f6b15e59a806 100644
--- a/packages/devextreme/js/ui/accordion.d.ts
+++ b/packages/devextreme/js/ui/accordion.d.ts
@@ -312,7 +312,7 @@ export type Options<
 // eslint-disable-next-line import/first
 import { CheckedEvents } from '../core';
 
-type FilterOutHidden<T> = Omit<T, 'onFocusIn' | 'onFocusOut' | 'onItemDeleted' | 'onItemDeleting' | 'onItemReordered'>;
+type FilterOutHidden<T> = Omit<T, 'onFocusIn' | 'onFocusOut' | 'onItemDeleted' | 'onItemDeleting' | 'onItemReordered' | 'onSelectionChanging'>;
 
 type EventsIntegrityCheckingHelper = CheckedEvents<FilterOutHidden<Properties>, Required<Events>, 'onItemTitleClick'>;
 
diff --git a/packages/devextreme/js/ui/accordion.js b/packages/devextreme/js/ui/accordion.js
index 1bba2e6c0ca0..af89eb476f99 100644
--- a/packages/devextreme/js/ui/accordion.js
+++ b/packages/devextreme/js/ui/accordion.js
@@ -4,6 +4,12 @@ export default Accordion;
 
 // STYLE accordion
 
+/**
+ * @name dxAccordionOptions.onSelectionChanging
+ * @hidden
+ * @action
+ */
+
 /**
  * @name dxAccordionItem
  * @inherits CollectionWidgetItem
diff --git a/packages/devextreme/js/ui/action_sheet.d.ts b/packages/devextreme/js/ui/action_sheet.d.ts
index 25e2c519181f..f8415c1c7aca 100644
--- a/packages/devextreme/js/ui/action_sheet.d.ts
+++ b/packages/devextreme/js/ui/action_sheet.d.ts
@@ -286,7 +286,7 @@ export type Options<
 // eslint-disable-next-line import/first
 import { CheckedEvents } from '../core';
 
-type FilterOutHidden<T> = Omit<T, 'onFocusIn' | 'onFocusOut' | 'onItemDeleted' | 'onItemDeleting' | 'onItemReordered' | 'onSelectionChanged'>;
+type FilterOutHidden<T> = Omit<T, 'onFocusIn' | 'onFocusOut' | 'onItemDeleted' | 'onItemDeleting' | 'onItemReordered' | 'onSelectionChanging' | 'onSelectionChanged'>;
 
 type EventsIntegrityCheckingHelper = CheckedEvents<FilterOutHidden<Properties>, Required<Events>, 'onCancelClick'>;
 
diff --git a/packages/devextreme/js/ui/action_sheet.js b/packages/devextreme/js/ui/action_sheet.js
index 21316c36ad93..41ec7f6766b5 100644
--- a/packages/devextreme/js/ui/action_sheet.js
+++ b/packages/devextreme/js/ui/action_sheet.js
@@ -25,6 +25,12 @@ export default ActionSheet;
  * @hidden
  */
 
+/**
+ * @name dxActionSheetOptions.onSelectionChanging
+ * @action
+ * @hidden
+ */
+
 /**
  * @name dxActionSheetOptions.onSelectionChanged
  * @action
diff --git a/packages/devextreme/js/ui/autocomplete.d.ts b/packages/devextreme/js/ui/autocomplete.d.ts
index b83d05497b9b..584cd59db5af 100644
--- a/packages/devextreme/js/ui/autocomplete.d.ts
+++ b/packages/devextreme/js/ui/autocomplete.d.ts
@@ -4,10 +4,12 @@ import {
     InitializedEventInfo,
     ChangedOptionInfo,
     ItemInfo,
+    AsyncCancelable,
 } from '../events/index';
 
 import dxDropDownList, {
     dxDropDownListOptions,
+    SelectionChangingInfo,
     SelectionChangedInfo,
 } from './drop_down_editor/ui.drop_down_list';
 
@@ -162,6 +164,14 @@ export type OptionChangedEvent = EventInfo<dxAutocomplete> & ChangedOptionInfo;
  */
 export type PasteEvent = NativeEventInfo<dxAutocomplete, ClipboardEvent>;
 
+/**
+ * @docid _ui_autocomplete_SelectionChangingEvent
+ * @public
+ * @type object
+ * @inherits AsyncCancelable,EventInfo,_ui_drop_down_editor_ui_drop_down_list_SelectionChangingInfo
+ */
+export type SelectionChangingEvent = AsyncCancelable & EventInfo<dxAutocomplete> & SelectionChangingInfo;
+
 /**
  * @docid _ui_autocomplete_SelectionChangedEvent
  * @public
@@ -335,6 +345,11 @@ onOptionChanged?: ((e: OptionChangedEvent) => void);
  * @type_function_param1 e:{ui/autocomplete:PasteEvent}
  */
 onPaste?: ((e: PasteEvent) => void);
+/**
+ * @docid dxAutocompleteOptions.onSelectionChanging
+ * @type_function_param1 e:{ui/autocomplete:SelectionChangingEvent}
+ */
+onSelectionChanging?: ((e: SelectionChangingEvent) => void);
 /**
  * @docid dxAutocompleteOptions.onSelectionChanged
  * @type_function_param1 e:{ui/autocomplete:SelectionChangedEvent}
diff --git a/packages/devextreme/js/ui/autocomplete_types.d.ts b/packages/devextreme/js/ui/autocomplete_types.d.ts
index 989d0fc3572d..0c8b703275bc 100644
--- a/packages/devextreme/js/ui/autocomplete_types.d.ts
+++ b/packages/devextreme/js/ui/autocomplete_types.d.ts
@@ -17,6 +17,7 @@ export {
   OpenedEvent,
   OptionChangedEvent,
   PasteEvent,
+  SelectionChangingEvent,
   SelectionChangedEvent,
   ValueChangedEvent,
   DropDownButtonTemplateData,
diff --git a/packages/devextreme/js/ui/box.d.ts b/packages/devextreme/js/ui/box.d.ts
index ec4ba2fd3ca0..4392472ffd22 100644
--- a/packages/devextreme/js/ui/box.d.ts
+++ b/packages/devextreme/js/ui/box.d.ts
@@ -218,7 +218,7 @@ export type Options<
 // eslint-disable-next-line import/first
 import { CheckedEvents } from '../core';
 
-type FilterOutHidden<T> = Omit<T, 'onFocusIn' | 'onFocusOut' | 'onItemDeleted' | 'onItemDeleting' | 'onItemReordered' | 'onSelectionChanged'>;
+type FilterOutHidden<T> = Omit<T, 'onFocusIn' | 'onFocusOut' | 'onItemDeleted' | 'onItemDeleting' | 'onItemReordered' | 'onSelectionChanging' | 'onSelectionChanged'>;
 
 type EventsIntegrityCheckingHelper = CheckedEvents<FilterOutHidden<Properties>, Required<Events>>;
 
diff --git a/packages/devextreme/js/ui/box.js b/packages/devextreme/js/ui/box.js
index 910b9b0e5183..aa36bcb8316c 100644
--- a/packages/devextreme/js/ui/box.js
+++ b/packages/devextreme/js/ui/box.js
@@ -22,6 +22,11 @@ export default Box;
  * @name dxBoxOptions.noDataText
  * @hidden
  */
+/**
+ * @name dxBoxOptions.onSelectionChanging
+ * @action
+ * @hidden
+ */
 /**
  * @name dxBoxOptions.onSelectionChanged
  * @action
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 0737f216bafc..8cd4103c9771 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
@@ -13,6 +13,7 @@ import {
     EventInfo,
     NativeEventInfo,
     ItemInfo,
+    AsyncCancelable,
 } from '../../events/index';
 
 import Widget, {
@@ -21,6 +22,25 @@ import Widget, {
 
 export type ItemLike = string | CollectionWidgetItem | any;
 
+/**
+ * @docid
+ * @hidden
+ */
+export interface SelectionChangingInfo<TItem extends ItemLike = any> {
+    /** @docid */
+    readonly addedItems: Array<TItem>;
+    /** @docid */
+    readonly removedItems: Array<TItem>;
+}
+
+/**
+ * @docid
+ * @public
+ * @type object
+ * @inherits AsyncCancelable,EventInfo,SelectionChangingInfo
+ */
+export type SelectionChangingEvent<TComponent> = AsyncCancelable & EventInfo<TComponent> & SelectionChangingInfo;
+
 /**
  * @docid
  * @hidden
@@ -126,6 +146,14 @@ export interface CollectionWidgetOptions<
      * @public
      */
     onItemRendered?: ((e: EventInfo<TComponent> & ItemInfo<TItem>) => void);
+    /**
+     * @docid
+     * @default null
+     * @type_function_param1 e:{ui/collection/ui.collection_widget.base:SelectionChangingEvent}
+     * @action
+     * @public
+     */
+    onSelectionChanging?: ((e: SelectionChangingEvent<TComponent>) => void);
     /**
      * @docid
      * @default null
diff --git a/packages/devextreme/js/ui/context_menu.d.ts b/packages/devextreme/js/ui/context_menu.d.ts
index 5bd6299bcfa9..bd2e15ecedf6 100644
--- a/packages/devextreme/js/ui/context_menu.d.ts
+++ b/packages/devextreme/js/ui/context_menu.d.ts
@@ -345,7 +345,7 @@ export type Options<TKey = any> = Properties<TKey>;
 // eslint-disable-next-line import/first
 import { CheckedEvents } from '../core';
 
-type FilterOutHidden<T> = Omit<T, 'onFocusIn' | 'onFocusOut' | 'onItemDeleted' | 'onItemDeleting' | 'onItemHold' | 'onItemReordered'>;
+type FilterOutHidden<T> = Omit<T, 'onFocusIn' | 'onFocusOut' | 'onItemDeleted' | 'onItemDeleting' | 'onItemHold' | 'onItemReordered' | 'onSelectionChanging'>;
 
 type EventsIntegrityCheckingHelper = CheckedEvents<FilterOutHidden<Properties>, Required<Events>, 'onHidden' | 'onHiding' | 'onPositioning' | 'onShowing' | 'onShown'>;
 
diff --git a/packages/devextreme/js/ui/context_menu.js b/packages/devextreme/js/ui/context_menu.js
index 3037c00265ea..ef286e8c3407 100644
--- a/packages/devextreme/js/ui/context_menu.js
+++ b/packages/devextreme/js/ui/context_menu.js
@@ -20,6 +20,11 @@ export default ContextMenu;
  * @hidden
  */
 
+/**
+ * @name dxContextMenuOptions.onSelectionChanging
+ * @hidden
+ */
+
 /**
  * @name dxContextMenuOptions.selectedItems
  * @hidden
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 5f7e8cf0e7ab..ca0ef7657551 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
@@ -13,6 +13,7 @@ import {
     EventInfo,
     NativeEventInfo,
     ItemInfo,
+    AsyncCancelable,
 } from '../../events/index';
 
 import {
@@ -31,6 +32,26 @@ import {
     SimplifiedSearchMode,
 } from '../../common';
 
+/**
+ * @docid _ui_drop_down_editor_ui_drop_down_list_SelectionChangingInfo
+ * @hidden
+ */
+export interface SelectionChangingInfo<T = any> {
+    /**
+     * @docid _ui_drop_down_editor_ui_drop_down_list_SelectionChangingInfo.selectedItem
+     * @type object
+     */
+    readonly selectedItem: T;
+}
+
+/**
+ * @docid _ui_drop_down_editor_ui_drop_down_list_SelectionChangingEvent
+ * @public
+ * @type object
+ * @inherits AsyncCancelable,EventInfo,SelectionChangingInfo
+ */
+export type SelectionChangingEvent<TComponent> = AsyncCancelable & EventInfo<TComponent> & SelectionChangingInfo;
+
 /**
  * @docid _ui_drop_down_editor_ui_drop_down_list_SelectionChangedInfo
  * @hidden
@@ -96,6 +117,14 @@ export interface dxDropDownListOptions<TComponent> extends DataExpressionMixinOp
      * @public
      */
     onItemClick?: ((e: NativeEventInfo<TComponent, KeyboardEvent | MouseEvent | PointerEvent> & ItemInfo) => void);
+    /**
+     * @docid
+     * @default null
+     * @type_function_param1 e:{ui/drop_down_editor/ui.drop_down_list:SelectionChangingEvent}
+     * @action
+     * @public
+     */
+    onSelectionChanging?: ((e: SelectionChangingEvent<TComponent>) => void);
     /**
      * @docid
      * @default null
diff --git a/packages/devextreme/js/ui/gallery.d.ts b/packages/devextreme/js/ui/gallery.d.ts
index 931afb72737f..4eeedc5614a6 100644
--- a/packages/devextreme/js/ui/gallery.d.ts
+++ b/packages/devextreme/js/ui/gallery.d.ts
@@ -289,7 +289,7 @@ export type Options<
 // eslint-disable-next-line import/first
 import { CheckedEvents } from '../core';
 
-type FilterOutHidden<T> = Omit<T, 'onFocusIn' | 'onFocusOut' | 'onItemDeleted' | 'onItemDeleting' | 'onItemReordered'>;
+type FilterOutHidden<T> = Omit<T, 'onFocusIn' | 'onFocusOut' | 'onItemDeleted' | 'onItemDeleting' | 'onItemReordered' | 'onSelectionChanging'>;
 
 type EventsIntegrityCheckingHelper = CheckedEvents<FilterOutHidden<Properties>, Required<Events>>;
 
diff --git a/packages/devextreme/js/ui/gallery.js b/packages/devextreme/js/ui/gallery.js
index 65a6a3d69c4d..096655d4424a 100644
--- a/packages/devextreme/js/ui/gallery.js
+++ b/packages/devextreme/js/ui/gallery.js
@@ -26,6 +26,12 @@ export default Gallery;
  * @hidden
  */
 
+/**
+ * @name dxGalleryOptions.onSelectionChanging
+ * @action
+ * @hidden
+ */
+
 /**
  * @name dxGalleryItem.visible
  * @hidden
diff --git a/packages/devextreme/js/ui/list.d.ts b/packages/devextreme/js/ui/list.d.ts
index aebc4f000699..a04cf1d2ac07 100644
--- a/packages/devextreme/js/ui/list.d.ts
+++ b/packages/devextreme/js/ui/list.d.ts
@@ -18,11 +18,13 @@ import {
     InitializedEventInfo,
     ChangedOptionInfo,
     ItemInfo,
+    AsyncCancelable,
 } from '../events/index';
 
 import CollectionWidget, {
     CollectionWidgetItem,
     CollectionWidgetOptions,
+    SelectionChangingInfo,
     SelectionChangedInfo,
 } from './collection/ui.collection_widget.base';
 
@@ -253,6 +255,14 @@ export type SelectAllValueChangedEvent<TItem extends ItemLike = any, TKey = any>
     readonly value: boolean;
 };
 
+/**
+ * @docid _ui_list_SelectionChangingEvent
+ * @public
+ * @type object
+ * @inherits AsyncCancelable,EventInfo,SelectionChangingInfo
+ */
+export type SelectionChangingEvent<TItem extends ItemLike = any, TKey = any> = AsyncCancelable & EventInfo<dxList<TItem, TKey>> & SelectionChangingInfo<TItem>;
+
 /**
  * @docid _ui_list_SelectionChangedEvent
  * @public
@@ -833,6 +843,7 @@ export type ExplicitTypes<
     PullRefreshEvent: PullRefreshEvent<TItem, TKey>;
     ScrollEvent: ScrollEvent<TItem, TKey>;
     SelectAllValueChangedEvent: SelectAllValueChangedEvent<TItem, TKey>;
+    SelectionChangingEvent: SelectionChangingEvent<TItem, TKey>;
     SelectionChangedEvent: SelectionChangedEvent<TItem, TKey>;
 };
 
@@ -885,6 +896,11 @@ onItemRendered?: ((e: ItemRenderedEvent) => void);
  * @type_function_param1 e:{ui/list:OptionChangedEvent}
  */
 onOptionChanged?: ((e: OptionChangedEvent) => void);
+/**
+ * @docid dxListOptions.onSelectionChanging
+ * @type_function_param1 e:{ui/list:SelectionChangingEvent}
+ */
+onSelectionChanging?: ((e: SelectionChangingEvent) => void);
 /**
  * @docid dxListOptions.onSelectionChanged
  * @type_function_param1 e:{ui/list:SelectionChangedEvent}
diff --git a/packages/devextreme/js/ui/list_types.d.ts b/packages/devextreme/js/ui/list_types.d.ts
index 532fa4c3af7d..a64867e470a1 100644
--- a/packages/devextreme/js/ui/list_types.d.ts
+++ b/packages/devextreme/js/ui/list_types.d.ts
@@ -21,6 +21,7 @@ export {
   PullRefreshEvent,
   ScrollEvent,
   SelectAllValueChangedEvent,
+  SelectionChangingEvent,
   SelectionChangedEvent,
   dxListOptions,
   Item,
diff --git a/packages/devextreme/js/ui/lookup.d.ts b/packages/devextreme/js/ui/lookup.d.ts
index 0b871411fb1e..b86ea9ef44b8 100644
--- a/packages/devextreme/js/ui/lookup.d.ts
+++ b/packages/devextreme/js/ui/lookup.d.ts
@@ -13,6 +13,7 @@ import {
     InitializedEventInfo,
     ChangedOptionInfo,
     ItemInfo,
+    AsyncCancelable,
 } from '../events/index';
 
 import {
@@ -21,6 +22,7 @@ import {
 
 import dxDropDownList, {
     dxDropDownListOptions,
+    SelectionChangingInfo,
     SelectionChangedInfo,
 } from './drop_down_editor/ui.drop_down_list';
 
@@ -126,11 +128,19 @@ export type PullRefreshEvent = EventInfo<dxLookup>;
  */
 export type ScrollEvent = NativeEventInfo<dxLookup, MouseEvent | Event> & ScrollInfo;
 
+/**
+ * @docid _ui_lookup_SelectionChangingEvent
+ * @public
+ * @type object
+ * @inherits AsyncCancelable,EventInfo,_ui_drop_down_editor_ui_drop_down_list_SelectionChangingInfo
+ */
+export type SelectionChangingEvent = AsyncCancelable & EventInfo<dxLookup> & SelectionChangingInfo;
+
 /**
  * @docid _ui_lookup_SelectionChangedEvent
  * @public
  * @type object
- * @inherits EventInfo,SelectionChangedInfo
+ * @inherits EventInfo,_ui_drop_down_editor_ui_drop_down_list_SelectionChangedInfo
  */
 export type SelectionChangedEvent = EventInfo<dxLookup> & SelectionChangedInfo;
 
@@ -431,6 +441,11 @@ onOpened?: ((e: OpenedEvent) => void);
  * @type_function_param1 e:{ui/lookup:OptionChangedEvent}
  */
 onOptionChanged?: ((e: OptionChangedEvent) => void);
+/**
+ * @docid dxLookupOptions.onSelectionChanging
+ * @type_function_param1 e:{ui/lookup:SelectionChangingEvent}
+ */
+onSelectionChanging?: ((e: SelectionChangingEvent) => void);
 /**
  * @docid dxLookupOptions.onSelectionChanged
  * @type_function_param1 e:{ui/lookup:SelectionChangedEvent}
diff --git a/packages/devextreme/js/ui/lookup_types.d.ts b/packages/devextreme/js/ui/lookup_types.d.ts
index d80346cc96a7..062fe0448b09 100644
--- a/packages/devextreme/js/ui/lookup_types.d.ts
+++ b/packages/devextreme/js/ui/lookup_types.d.ts
@@ -11,6 +11,7 @@ export {
   PageLoadingEvent,
   PullRefreshEvent,
   ScrollEvent,
+  SelectionChangingEvent,
   SelectionChangedEvent,
   TitleRenderedEvent,
   ValueChangedEvent,
diff --git a/packages/devextreme/js/ui/menu.d.ts b/packages/devextreme/js/ui/menu.d.ts
index d486151fa4dc..259bfd71bee0 100644
--- a/packages/devextreme/js/ui/menu.d.ts
+++ b/packages/devextreme/js/ui/menu.d.ts
@@ -406,7 +406,7 @@ export type Options<TKey = any> = Properties<TKey>;
 // eslint-disable-next-line import/first
 import { CheckedEvents } from '../core';
 
-type FilterOutHidden<T> = Omit<T, 'onFocusIn' | 'onFocusOut' | 'onItemDeleted' | 'onItemDeleting' | 'onItemHold' | 'onItemReordered' | 'onSelectionChange'>;
+type FilterOutHidden<T> = Omit<T, 'onFocusIn' | 'onFocusOut' | 'onItemDeleted' | 'onItemDeleting' | 'onItemHold' | 'onItemReordered' | 'onSelectionChanging'>;
 
 type EventsIntegrityCheckingHelper = CheckedEvents<FilterOutHidden<Properties>, Required<Events>, 'onSubmenuHidden' | 'onSubmenuHiding' | 'onSubmenuShowing' | 'onSubmenuShown'>;
 
diff --git a/packages/devextreme/js/ui/menu.js b/packages/devextreme/js/ui/menu.js
index 2299e146a540..b2ca569a683a 100644
--- a/packages/devextreme/js/ui/menu.js
+++ b/packages/devextreme/js/ui/menu.js
@@ -16,7 +16,7 @@ export default Menu;
  */
 
 /**
- * @name dxMenuOptions.onSelectionChange
+ * @name dxMenuOptions.onSelectionChanging
  * @hidden
  * @action
  */
diff --git a/packages/devextreme/js/ui/multi_view.d.ts b/packages/devextreme/js/ui/multi_view.d.ts
index 72020424b621..b60e5404396a 100644
--- a/packages/devextreme/js/ui/multi_view.d.ts
+++ b/packages/devextreme/js/ui/multi_view.d.ts
@@ -217,7 +217,7 @@ export type Options<
 // eslint-disable-next-line import/first
 import { CheckedEvents } from '../core';
 
-type FilterOutHidden<T> = Omit<T, 'onFocusIn' | 'onFocusOut' | 'onItemDeleted' | 'onItemDeleting' | 'onItemReordered'>;
+type FilterOutHidden<T> = Omit<T, 'onFocusIn' | 'onFocusOut' | 'onItemDeleted' | 'onItemDeleting' | 'onItemReordered' | 'onSelectionChanging'>;
 
 type EventsIntegrityCheckingHelper = CheckedEvents<FilterOutHidden<Properties>, Required<Events>>;
 
diff --git a/packages/devextreme/js/ui/multi_view.js b/packages/devextreme/js/ui/multi_view.js
index f19ef0fdebc4..9168327948b0 100644
--- a/packages/devextreme/js/ui/multi_view.js
+++ b/packages/devextreme/js/ui/multi_view.js
@@ -19,6 +19,12 @@ export default MultiView;
  * @hidden
  */
 
+/**
+ * @name dxMultiViewOptions.onSelectionChanging
+ * @action
+ * @hidden
+ */
+
 /**
  * @name dxMultiViewItem.visible
  * @hidden
diff --git a/packages/devextreme/js/ui/responsive_box.d.ts b/packages/devextreme/js/ui/responsive_box.d.ts
index 97242b6cf4e2..ab8ad419ab06 100644
--- a/packages/devextreme/js/ui/responsive_box.d.ts
+++ b/packages/devextreme/js/ui/responsive_box.d.ts
@@ -273,7 +273,7 @@ export type Options<
 // eslint-disable-next-line import/first
 import { CheckedEvents } from '../core';
 
-type FilterOutHidden<T> = Omit<T, 'onFocusIn' | 'onFocusOut' | 'onItemDeleted' | 'onItemDeleting' | 'onItemReordered' | 'onSelectionChanged'>;
+type FilterOutHidden<T> = Omit<T, 'onFocusIn' | 'onFocusOut' | 'onItemDeleted' | 'onItemDeleting' | 'onItemReordered' | 'onSelectionChanging' | 'onSelectionChanged'>;
 
 type EventsIntegrityCheckingHelper = CheckedEvents<FilterOutHidden<Properties>, Required<Events>>;
 
diff --git a/packages/devextreme/js/ui/responsive_box.js b/packages/devextreme/js/ui/responsive_box.js
index d34565f6f3ab..47a6738f9f1a 100644
--- a/packages/devextreme/js/ui/responsive_box.js
+++ b/packages/devextreme/js/ui/responsive_box.js
@@ -29,6 +29,12 @@ export default ResponsiveBox;
  * @hidden
  */
 
+/**
+ * @name dxResponsiveBoxOptions.onSelectionChanging
+ * @action
+ * @hidden
+ */
+
 /**
  * @name dxResponsiveBoxOptions.onSelectionChanged
  * @action
diff --git a/packages/devextreme/js/ui/select_box.d.ts b/packages/devextreme/js/ui/select_box.d.ts
index 3c2745db0b62..95277a28fe8a 100644
--- a/packages/devextreme/js/ui/select_box.d.ts
+++ b/packages/devextreme/js/ui/select_box.d.ts
@@ -13,6 +13,7 @@ import {
     InitializedEventInfo,
     ChangedOptionInfo,
     ItemInfo,
+    AsyncCancelable,
 } from '../events/index';
 
 import {
@@ -21,6 +22,7 @@ import {
 
 import dxDropDownList, {
     dxDropDownListOptions,
+    SelectionChangingInfo,
     SelectionChangedInfo,
 } from './drop_down_editor/ui.drop_down_list';
 
@@ -193,6 +195,14 @@ export type OptionChangedEvent = EventInfo<dxSelectBox> & ChangedOptionInfo;
  */
 export type PasteEvent = NativeEventInfo<dxSelectBox, ClipboardEvent>;
 
+/**
+ * @docid _ui_select_box_SelectionChangingEvent
+ * @public
+ * @type object
+ * @inherits AsyncCancelable,EventInfo,_ui_drop_down_editor_ui_drop_down_list_SelectionChangingInfo
+ */
+export type SelectionChangingEvent = AsyncCancelable & EventInfo<dxSelectBox> & SelectionChangingInfo;
+
 /**
  * @docid _ui_select_box_SelectionChangedEvent
  * @public
@@ -398,6 +408,11 @@ onOptionChanged?: ((e: OptionChangedEvent) => void);
  * @type_function_param1 e:{ui/select_box:PasteEvent}
  */
 onPaste?: ((e: PasteEvent) => void);
+/**
+ * @docid dxSelectBoxOptions.onSelectionChanging
+ * @type_function_param1 e:{ui/select_box:SelectionChangingEvent}
+ */
+onSelectionChanging?: ((e: SelectionChangingEvent) => void);
 /**
  * @docid dxSelectBoxOptions.onSelectionChanged
  * @type_function_param1 e:{ui/select_box:SelectionChangedEvent}
diff --git a/packages/devextreme/js/ui/select_box_types.d.ts b/packages/devextreme/js/ui/select_box_types.d.ts
index d4fcbfc9437e..8c926d1d06af 100644
--- a/packages/devextreme/js/ui/select_box_types.d.ts
+++ b/packages/devextreme/js/ui/select_box_types.d.ts
@@ -18,6 +18,7 @@ export {
   OpenedEvent,
   OptionChangedEvent,
   PasteEvent,
+  SelectionChangingEvent,
   SelectionChangedEvent,
   ValueChangedEvent,
   DropDownButtonTemplateData,
diff --git a/packages/devextreme/js/ui/splitter.d.ts b/packages/devextreme/js/ui/splitter.d.ts
index 19c6fa4c2322..254726b90974 100644
--- a/packages/devextreme/js/ui/splitter.d.ts
+++ b/packages/devextreme/js/ui/splitter.d.ts
@@ -316,7 +316,7 @@ export type Properties<
 // eslint-disable-next-line import/first
 import { CheckedEvents } from '../core';
 
-type FilterOutHidden<T> = Omit<T, 'onFocusIn' | 'onFocusOut' | 'onItemDeleted' | 'onItemDeleting' | 'onItemReordered' | 'onSelectionChanged' | 'onItemHold'>;
+type FilterOutHidden<T> = Omit<T, 'onFocusIn' | 'onFocusOut' | 'onItemDeleted' | 'onItemDeleting' | 'onItemReordered' | 'onSelectionChanging' | 'onSelectionChanged' | 'onItemHold'>;
 
 type EventsIntegrityCheckingHelper = CheckedEvents<FilterOutHidden<Properties>, Required<Events>, 'onResize' | 'onResizeEnd' | 'onResizeStart' | 'onItemExpanded' | 'onItemCollapsed'>;
 
diff --git a/packages/devextreme/js/ui/splitter.js b/packages/devextreme/js/ui/splitter.js
index 4825a3d338c2..5a8f3b7d17e9 100644
--- a/packages/devextreme/js/ui/splitter.js
+++ b/packages/devextreme/js/ui/splitter.js
@@ -24,6 +24,12 @@ export default Splitter;
  * @hidden
  */
 
+/**
+ * @name dxSplitterOptions.onSelectionChanging
+ * @action
+ * @hidden
+ */
+
 /**
  * @name dxSplitterOptions.onSelectionChanged
  * @action
diff --git a/packages/devextreme/js/ui/tab_panel.d.ts b/packages/devextreme/js/ui/tab_panel.d.ts
index e7f1e85f9c5d..d01a1e036b35 100644
--- a/packages/devextreme/js/ui/tab_panel.d.ts
+++ b/packages/devextreme/js/ui/tab_panel.d.ts
@@ -14,6 +14,7 @@ import {
     InitializedEventInfo,
     ChangedOptionInfo,
     ItemInfo,
+    AsyncCancelable,
 } from '../events/index';
 
 import {
@@ -23,6 +24,7 @@ import {
 } from '../common';
 
 import CollectionWidget, {
+    SelectionChangingInfo,
     SelectionChangedInfo,
 } from './collection/ui.collection_widget.base';
 
@@ -117,6 +119,14 @@ export type ItemRenderedEvent<TItem extends ItemLike = any, TKey = any> = EventI
  */
 export type OptionChangedEvent<TItem extends ItemLike = any, TKey = any> = EventInfo<dxTabPanel<TItem, TKey>> & ChangedOptionInfo;
 
+/**
+ * @docid _ui_tab_panel_SelectionChangingEvent
+ * @public
+ * @type object
+ * @inherits AsyncCancelable,EventInfo,SelectionChangingInfo
+ */
+export type SelectionChangingEvent<TItem extends ItemLike = any, TKey = any> = AsyncCancelable & EventInfo<dxTabPanel<TItem, TKey>> & SelectionChangingInfo<TItem>;
+
 /**
  * @docid _ui_tab_panel_SelectionChangedEvent
  * @public
@@ -330,6 +340,7 @@ export type ExplicitTypes<
     ItemHoldEvent: ItemHoldEvent<TItem, TKey>;
     ItemRenderedEvent: ItemRenderedEvent<TItem, TKey>;
     OptionChangedEvent: OptionChangedEvent<TItem, TKey>;
+    SelectionChangingEvent: SelectionChangingEvent<TItem, TKey>;
     SelectionChangedEvent: SelectionChangedEvent<TItem, TKey>;
     TitleClickEvent: TitleClickEvent<TItem, TKey>;
     TitleHoldEvent: TitleHoldEvent<TItem, TKey>;
@@ -400,6 +411,11 @@ onItemRendered?: ((e: ItemRenderedEvent) => void);
  * @type_function_param1 e:{ui/tab_panel:OptionChangedEvent}
  */
 onOptionChanged?: ((e: OptionChangedEvent) => void);
+/**
+ * @docid dxTabPanelOptions.onSelectionChanging
+ * @type_function_param1 e:{ui/tab_panel:SelectionChangingEvent}
+ */
+onSelectionChanging?: ((e: SelectionChangingEvent) => void);
 /**
  * @docid dxTabPanelOptions.onSelectionChanged
  * @type_function_param1 e:{ui/tab_panel:SelectionChangedEvent}
diff --git a/packages/devextreme/js/ui/tab_panel_types.d.ts b/packages/devextreme/js/ui/tab_panel_types.d.ts
index 4aee9203d20a..966bc0c4f3be 100644
--- a/packages/devextreme/js/ui/tab_panel_types.d.ts
+++ b/packages/devextreme/js/ui/tab_panel_types.d.ts
@@ -10,6 +10,7 @@ export {
   ItemHoldEvent,
   ItemRenderedEvent,
   OptionChangedEvent,
+  SelectionChangingEvent,
   SelectionChangedEvent,
   TitleClickEvent,
   TitleHoldEvent,
diff --git a/packages/devextreme/js/ui/tabs.d.ts b/packages/devextreme/js/ui/tabs.d.ts
index 0aaa5bf04e34..da1b4f0a48e5 100644
--- a/packages/devextreme/js/ui/tabs.d.ts
+++ b/packages/devextreme/js/ui/tabs.d.ts
@@ -6,12 +6,14 @@ import {
     InitializedEventInfo,
     ChangedOptionInfo,
     ItemInfo,
+    AsyncCancelable,
 } from '../events/index';
 
 import CollectionWidget, {
     CollectionWidgetItem,
     CollectionWidgetOptions,
     SelectionChangedInfo,
+    SelectionChangingInfo,
 } from './collection/ui.collection_widget.base';
 
 import {
@@ -94,6 +96,14 @@ export type ItemRenderedEvent<TItem extends ItemLike = any, TKey = any> = EventI
  */
 export type OptionChangedEvent<TItem extends ItemLike = any, TKey = any> = EventInfo<dxTabs<TItem, TKey>> & ChangedOptionInfo;
 
+/**
+ * @docid _ui_tabs_SelectionChangingEvent
+ * @public
+ * @type object
+ * @inherits AsyncCancelable,EventInfo,SelectionChangingInfo
+ */
+export type SelectionChangingEvent<TItem extends ItemLike = any, TKey = any> = AsyncCancelable & EventInfo<dxTabs<TItem, TKey>> & SelectionChangingInfo<TItem>;
+
 /**
  * @docid _ui_tabs_SelectionChangedEvent
  * @public
@@ -254,6 +264,7 @@ export type ExplicitTypes<
     ItemRenderedEvent: ItemRenderedEvent<TItem, TKey>;
     OptionChangedEvent: OptionChangedEvent<TItem, TKey>;
     SelectionChangedEvent: SelectionChangedEvent<TItem, TKey>;
+    SelectionChangingEvent: SelectionChangingEvent<TItem, TKey>;
 };
 
 /** @public */
@@ -320,6 +331,11 @@ onItemRendered?: ((e: ItemRenderedEvent) => void);
  * @type_function_param1 e:{ui/tabs:OptionChangedEvent}
  */
 onOptionChanged?: ((e: OptionChangedEvent) => void);
+/**
+ * @docid dxTabsOptions.onSelectionChanging
+ * @type_function_param1 e:{ui/tabs:SelectionChangingEvent}
+ */
+onSelectionChanging?: ((e: SelectionChangingEvent) => void);
 /**
  * @docid dxTabsOptions.onSelectionChanged
  * @type_function_param1 e:{ui/tabs:SelectionChangedEvent}
diff --git a/packages/devextreme/js/ui/tabs_types.d.ts b/packages/devextreme/js/ui/tabs_types.d.ts
index 5e5540da6550..6023597e2779 100644
--- a/packages/devextreme/js/ui/tabs_types.d.ts
+++ b/packages/devextreme/js/ui/tabs_types.d.ts
@@ -11,6 +11,7 @@ export {
   ItemHoldEvent,
   ItemRenderedEvent,
   OptionChangedEvent,
+  SelectionChangingEvent,
   SelectionChangedEvent,
   dxTabsOptions,
   Item,
diff --git a/packages/devextreme/js/ui/tag_box.d.ts b/packages/devextreme/js/ui/tag_box.d.ts
index cab414278ff5..9e6a06e99fc4 100644
--- a/packages/devextreme/js/ui/tag_box.d.ts
+++ b/packages/devextreme/js/ui/tag_box.d.ts
@@ -9,6 +9,7 @@ import {
 
 import {
     Cancelable,
+    AsyncCancelable,
     EventInfo,
     NativeEventInfo,
     InitializedEventInfo,
@@ -17,6 +18,7 @@ import {
 } from '../events/index';
 
 import {
+    SelectionChangingInfo,
     SelectionChangedInfo,
 } from './collection/ui.collection_widget.base';
 
@@ -190,6 +192,14 @@ export type SelectAllValueChangedEvent = EventInfo<dxTagBox> & {
     readonly value: boolean;
 };
 
+/**
+ * @docid _ui_tag_box_SelectionChangingEvent
+ * @public
+ * @type object
+ * @inherits AsyncCancelable,EventInfo,SelectionChangingInfo
+ */
+export type SelectionChangingEvent = AsyncCancelable & EventInfo<dxTagBox> & SelectionChangingInfo<string | number | any>;
+
 /**
  * @docid _ui_tag_box_SelectionChangedEvent
  * @public
@@ -214,7 +224,7 @@ export type DropDownButtonTemplateData = DropDownButtonTemplateDataModel;
  * @namespace DevExpress.ui
  * @docid
  */
-export interface dxTagBoxOptions extends Pick<dxSelectBoxOptions<dxTagBox>, Exclude<keyof dxSelectBoxOptions<dxTagBox>, 'onSelectionChanged'>> {
+export interface dxTagBoxOptions extends Pick<dxSelectBoxOptions<dxTagBox>, Exclude<keyof dxSelectBoxOptions<dxTagBox>, 'onSelectionChanged' | 'onSelectionChanging'>> {
     /**
      * @docid
      * @default "instantly"
@@ -255,6 +265,14 @@ export interface dxTagBoxOptions extends Pick<dxSelectBoxOptions<dxTagBox>, Excl
      * @public
      */
     onSelectAllValueChanged?: ((e: SelectAllValueChangedEvent) => void);
+    /**
+     * @docid
+     * @default null
+     * @type_function_param1 e:{ui/tag_box:SelectionChangingEvent}
+     * @action
+     * @public
+     */
+    onSelectionChanging?: ((e: SelectionChangingEvent) => void);
     /**
      * @docid
      * @default null
@@ -335,7 +353,7 @@ import { CheckedEvents } from '../core';
 
 type FilterOutHidden<T> = Omit<T, 'onCopy' | 'onCut' | 'onPaste'>;
 
-type EventsIntegrityCheckingHelper = CheckedEvents<FilterOutHidden<Properties>, Required<Events>, 'onMultiTagPreparing' | 'onSelectAllValueChanged' | 'onSelectionChanged'>;
+type EventsIntegrityCheckingHelper = CheckedEvents<FilterOutHidden<Properties>, Required<Events>, 'onMultiTagPreparing' | 'onSelectAllValueChanged' | 'onSelectionChanged' | 'onSelectionChanging'>;
 
 /**
 * @hidden
diff --git a/packages/devextreme/js/ui/tag_box_types.d.ts b/packages/devextreme/js/ui/tag_box_types.d.ts
index 8b26bb168b5b..2349f5edfc8c 100644
--- a/packages/devextreme/js/ui/tag_box_types.d.ts
+++ b/packages/devextreme/js/ui/tag_box_types.d.ts
@@ -17,6 +17,7 @@ export {
   OpenedEvent,
   OptionChangedEvent,
   SelectAllValueChangedEvent,
+  SelectionChangingEvent,
   SelectionChangedEvent,
   ValueChangedEvent,
   DropDownButtonTemplateData,
diff --git a/packages/devextreme/js/ui/tile_view.d.ts b/packages/devextreme/js/ui/tile_view.d.ts
index ce51a71c737e..14e6acc8d1c2 100644
--- a/packages/devextreme/js/ui/tile_view.d.ts
+++ b/packages/devextreme/js/ui/tile_view.d.ts
@@ -245,7 +245,7 @@ export type Options<
 // eslint-disable-next-line import/first
 import { CheckedEvents } from '../core';
 
-type FilterOutHidden<T> = Omit<T, 'onFocusIn' | 'onFocusOut' | 'onItemDeleted' | 'onItemDeleting' | 'onItemReordered' | 'onSelectionChanged'>;
+type FilterOutHidden<T> = Omit<T, 'onFocusIn' | 'onFocusOut' | 'onItemDeleted' | 'onItemDeleting' | 'onItemReordered' | 'onSelectionChanging' | 'onSelectionChanged'>;
 
 type EventsIntegrityCheckingHelper = CheckedEvents<FilterOutHidden<Properties>, Required<Events>>;
 
diff --git a/packages/devextreme/js/ui/tile_view.js b/packages/devextreme/js/ui/tile_view.js
index 9eb397302b05..79d432468a5d 100644
--- a/packages/devextreme/js/ui/tile_view.js
+++ b/packages/devextreme/js/ui/tile_view.js
@@ -29,6 +29,12 @@ export default TagBox;
  * @hidden
  */
 
+/**
+ * @name dxTileViewOptions.onSelectionChanging
+ * @action
+ * @hidden
+ */
+
 /**
  * @name dxTileViewOptions.onSelectionChanged
  * @action
diff --git a/packages/devextreme/js/ui/toolbar.d.ts b/packages/devextreme/js/ui/toolbar.d.ts
index a83f06e81958..bd461cb7a2ee 100644
--- a/packages/devextreme/js/ui/toolbar.d.ts
+++ b/packages/devextreme/js/ui/toolbar.d.ts
@@ -237,7 +237,7 @@ export type Options<
 // eslint-disable-next-line import/first
 import { CheckedEvents } from '../core';
 
-type FilterOutHidden<T> = Omit<T, 'onFocusIn' | 'onFocusOut' | 'onItemDeleted' | 'onItemDeleting' | 'onItemReordered' | 'onSelectionChanged'>;
+type FilterOutHidden<T> = Omit<T, 'onFocusIn' | 'onFocusOut' | 'onItemDeleted' | 'onItemDeleting' | 'onItemReordered' | 'onSelectionChanging' | 'onSelectionChanged'>;
 
 type EventsIntegrityCheckingHelper = CheckedEvents<FilterOutHidden<Properties>, Required<Events>>;
 
diff --git a/packages/devextreme/js/ui/toolbar.js b/packages/devextreme/js/ui/toolbar.js
index af20910a8cb8..e96cebec5f62 100644
--- a/packages/devextreme/js/ui/toolbar.js
+++ b/packages/devextreme/js/ui/toolbar.js
@@ -62,6 +62,12 @@ export default Toolbar;
  * @hidden
  */
 
+/**
+ * @name dxToolbarOptions.onSelectionChanging
+ * @action
+ * @hidden
+ */
+
 /**
  * @name dxToolbarOptions.onSelectionChanged
  * @action
diff --git a/packages/devextreme/js/ui/tree_view.d.ts b/packages/devextreme/js/ui/tree_view.d.ts
index 2b3d3b43cd11..dc21bb03bd48 100644
--- a/packages/devextreme/js/ui/tree_view.d.ts
+++ b/packages/devextreme/js/ui/tree_view.d.ts
@@ -716,7 +716,7 @@ export type Options<TKey = any> = Properties<TKey>;
 // eslint-disable-next-line import/first
 import { CheckedEvents } from '../core';
 
-type FilterOutHidden<T> = Omit<T, 'onFocusIn' | 'onFocusOut' | 'onItemDeleted' | 'onItemDeleting' | 'onItemReordered'>;
+type FilterOutHidden<T> = Omit<T, 'onFocusIn' | 'onFocusOut' | 'onItemDeleted' | 'onItemDeleting' | 'onItemReordered' | 'onSelectionChanging'>;
 
 type EventsIntegrityCheckingHelper = CheckedEvents<FilterOutHidden<Properties>, Required<Events>, 'onItemClick' | 'onItemCollapsed' | 'onItemContextMenu' | 'onItemExpanded' | 'onItemHold' | 'onItemRendered' | 'onItemSelectionChanged' | 'onSelectAllValueChanged' | 'onSelectionChanged'>;
 
diff --git a/packages/devextreme/js/ui/tree_view.js b/packages/devextreme/js/ui/tree_view.js
index 4f29996e83d8..0f8ad4635f96 100644
--- a/packages/devextreme/js/ui/tree_view.js
+++ b/packages/devextreme/js/ui/tree_view.js
@@ -24,3 +24,9 @@ export default TreeView;
  * @name dxTreeViewOptions.selectedIndex
  * @hidden
  */
+/**
+ * @name dxTreeViewOptions.onSelectionChanging
+ * @hidden
+ * @action
+ */
+
diff --git a/packages/devextreme/js/ui/validation_summary.d.ts b/packages/devextreme/js/ui/validation_summary.d.ts
index d1a8165c8265..6b51ce56c76a 100644
--- a/packages/devextreme/js/ui/validation_summary.d.ts
+++ b/packages/devextreme/js/ui/validation_summary.d.ts
@@ -115,7 +115,7 @@ export type Options<
 // eslint-disable-next-line import/first
 import { CheckedEvents } from '../core';
 
-type FilterOutHidden<T> = Omit<T, 'onFocusIn' | 'onFocusOut' | 'onItemContextMenu' | 'onItemDeleted' | 'onItemDeleting' | 'onItemHold' | 'onItemRendered' | 'onItemReordered' | 'onItemSelect' | 'onSelectionChanged'>;
+type FilterOutHidden<T> = Omit<T, 'onFocusIn' | 'onFocusOut' | 'onItemContextMenu' | 'onItemDeleted' | 'onItemDeleting' | 'onItemHold' | 'onItemRendered' | 'onItemReordered' | 'onItemSelect' | 'onSelectionChanging' | 'onSelectionChanged'>;
 
 type EventsIntegrityCheckingHelper = CheckedEvents<FilterOutHidden<Properties>, Required<Events>>;
 
diff --git a/packages/devextreme/js/ui/validation_summary.js b/packages/devextreme/js/ui/validation_summary.js
index cc57924f14f6..38f6002881ad 100644
--- a/packages/devextreme/js/ui/validation_summary.js
+++ b/packages/devextreme/js/ui/validation_summary.js
@@ -100,6 +100,12 @@ export default ValidationSummary;
  * @action
  */
 
+/**
+ * @name dxValidationSummaryOptions.onSelectionChanging
+ * @hidden
+ * @action
+ */
+
 /**
  * @name dxValidationSummaryOptions.onSelectionChanged
  * @hidden
diff --git a/packages/devextreme/playground/jquery.html b/packages/devextreme/playground/jquery.html
index fde766f17218..2c85adb315c7 100644
--- a/packages/devextreme/playground/jquery.html
+++ b/packages/devextreme/playground/jquery.html
@@ -17,6 +17,8 @@
     </script>
 
     <script type="text/javascript" src="../artifacts/js/jquery.js"></script>
+
+    
     <!-- HtmlEditor -->
     <!-- <script type="text/javascript" src="../artifacts/js/dx-quill.min.js"></script> -->
 
@@ -39,6 +41,7 @@
     -->
 
     <script type="text/javascript" src="../artifacts/js/dx.all.debug.js" charset="utf-8"></script>
+    <script type="text/javascript" src="https://unpkg.com/devextreme-aspnet-data@3.0.0/js/dx.aspnet.data.js"></script>
     <script type="text/javascript" src="./themeSelector.js"></script>
     <script type="text/javascript" src="../../../node_modules/axe-core/axe.min.js"></script>
 </head>
@@ -49,14 +52,102 @@ <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Te
         <select id="theme-selector" style="display: block;">
         </select>
         <br />
+       
+    <div class="dx-viewport demo-container">
+        <div id="list"></div>
+      </div>
+
+      <div style="display: inline-flex; align-items: center; gap: 20px;">
+        <div>Default</div>
         <div id="button"></div>
+        <div>Hover</div>
+        <div id="buttonHover"></div>
+        <div>Focus</div>
+        <div id="buttonFocus"></div>
+  <div>Active</div>
+        <div id="buttonActive"></div>
+        <div>Disabled</div>
+        <div id="buttonDisabled"></div>
+      </div>
+   
+    
         <script>
-            $(function() {
-                $("#button").dxButton({
-                    text: 'Click me!',
-                    onClick: function() { alert("clicked"); }
-                });
-            });
+            $(() => {
+  const listData = new DevExpress.data.DataSource({
+    store: DevExpress.data.AspNet.createStore({
+      key: 'ProductID',
+      loadUrl: 'https://js.devexpress.com/Demos/Mvc/api/ListData/Orders',
+    }),
+    paginate: true,
+    loadMode: 'raw',
+  });
+
+  $('#list').dxList({
+
+    accessKey: 's',
+    dataSource: listData,
+    displayExpr: 'ProductName',
+    height: 400,
+    selectionMode: 'all',
+
+    showSelectionControls: true,
+    selectedItemKeys: [25]
+  });
+
+  $('#list').dxResizable()
+});
+
+$('#button').dxButton({
+  icon: 'send',
+  stylingMode: 'text',
+  type: 'default',
+})
+
+$('#buttonHover').dxButton({
+  icon: 'send',
+  stylingMode: 'text',
+  type: 'default',
+  onInitialized: (e) => {
+    setTimeout(() => {
+      e.component.$element().addClass('dx-state-hover')
+    })
+   
+  }
+})
+
+$('#buttonFocus').dxButton({
+  icon: 'send',
+  stylingMode: 'text',
+  type: 'default',
+  onInitialized: (e) => {
+    setTimeout(() => {
+      e.component.$element().addClass('dx-state-focused')
+    })
+   
+  }
+})
+
+$('#buttonActive').dxButton({
+  icon: 'send',
+  stylingMode: 'text',
+  type: 'default',
+  onInitialized: (e) => {
+    setTimeout(() => {
+      e.component.$element().addClass('dx-state-active')
+    })
+   
+  }
+})
+
+
+$('#buttonDisabled').dxButton({
+  icon: 'send',
+  stylingMode: 'text',
+  type: 'default',
+  disabled: true,
+})
+
+
         </script>
     </div>
 </body>
diff --git a/packages/devextreme/ts/dx.all.d.ts b/packages/devextreme/ts/dx.all.d.ts
index 4ea4f2bae087..b277e626a6e3 100644
--- a/packages/devextreme/ts/dx.all.d.ts
+++ b/packages/devextreme/ts/dx.all.d.ts
@@ -6700,6 +6700,15 @@ declare module DevExpress.data.utils.odata {
   export var keyConverters: any;
 }
 declare module DevExpress.events {
+  /**
+   * [descr:AsyncCancelable]
+   */
+  export type AsyncCancelable = {
+    /**
+     * [descr:AsyncCancelable.cancel]
+     */
+    cancel: boolean | PromiseLike<boolean>;
+  };
   /**
    * [descr:Cancelable]
    */
@@ -7960,6 +7969,27 @@ declare module DevExpress.ui {
        */
       readonly removedItems: Array<TItem>;
     }
+    /**
+     * [descr:SelectionChangingEvent]
+     */
+    export type SelectionChangingEvent<TComponent> =
+      DevExpress.events.AsyncCancelable &
+        DevExpress.events.EventInfo<TComponent> &
+        SelectionChangingInfo;
+    /**
+     * [descr:SelectionChangingInfo]
+     * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
+     */
+    export interface SelectionChangingInfo<TItem extends ItemLike = any> {
+      /**
+       * [descr:SelectionChangingInfo.addedItems]
+       */
+      readonly addedItems: Array<TItem>;
+      /**
+       * [descr:SelectionChangingInfo.removedItems]
+       */
+      readonly removedItems: Array<TItem>;
+    }
   }
   /**
    * [descr:CollectionWidgetItem]
@@ -8071,6 +8101,12 @@ declare module DevExpress.ui {
       e: DevExpress.events.EventInfo<TComponent> &
         DevExpress.events.ItemInfo<TItem>
     ) => void;
+    /**
+     * [descr:CollectionWidgetOptions.onSelectionChanging]
+     */
+    onSelectionChanging?: (
+      e: DevExpress.ui.CollectionWidget.SelectionChangingEvent<TComponent>
+    ) => void;
     /**
      * [descr:CollectionWidgetOptions.onSelectionChanged]
      */
@@ -8847,6 +8883,12 @@ declare module DevExpress.ui {
     export type SelectionChangedEvent =
       DevExpress.events.EventInfo<dxAutocomplete> &
         DevExpress.ui.dxDropDownList.SelectionChangedInfo;
+    /**
+     * [descr:_ui_autocomplete_SelectionChangingEvent]
+     */
+    export type SelectionChangingEvent = DevExpress.events.AsyncCancelable &
+      DevExpress.events.EventInfo<dxAutocomplete> &
+      DevExpress.ui.dxDropDownList.SelectionChangingInfo;
     /**
      * [descr:_ui_autocomplete_ValueChangedEvent]
      */
@@ -14830,6 +14872,23 @@ declare module DevExpress.ui {
        */
       readonly selectedItem: T;
     }
+    /**
+     * [descr:_ui_drop_down_editor_ui_drop_down_list_SelectionChangingEvent]
+     */
+    export type SelectionChangingEvent<TComponent> =
+      DevExpress.events.AsyncCancelable &
+        DevExpress.events.EventInfo<TComponent> &
+        SelectionChangingInfo;
+    /**
+     * [descr:_ui_drop_down_editor_ui_drop_down_list_SelectionChangingInfo]
+     * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
+     */
+    export interface SelectionChangingInfo<T = any> {
+      /**
+       * [descr:_ui_drop_down_editor_ui_drop_down_list_SelectionChangingInfo.selectedItem]
+       */
+      readonly selectedItem: T;
+    }
   }
   /**
    * [descr:dxDropDownListOptions]
@@ -14874,6 +14933,12 @@ declare module DevExpress.ui {
       > &
         DevExpress.events.ItemInfo
     ) => void;
+    /**
+     * [descr:dxDropDownListOptions.onSelectionChanging]
+     */
+    onSelectionChanging?: (
+      e: DevExpress.ui.dxDropDownList.SelectionChangingEvent<TComponent>
+    ) => void;
     /**
      * [descr:dxDropDownListOptions.onSelectionChanged]
      */
@@ -19608,6 +19673,7 @@ declare module DevExpress.ui {
       PullRefreshEvent: PullRefreshEvent<TItem, TKey>;
       ScrollEvent: ScrollEvent<TItem, TKey>;
       SelectAllValueChangedEvent: SelectAllValueChangedEvent<TItem, TKey>;
+      SelectionChangingEvent: SelectionChangingEvent<TItem, TKey>;
       SelectionChangedEvent: SelectionChangedEvent<TItem, TKey>;
     };
     /**
@@ -19841,6 +19907,15 @@ declare module DevExpress.ui {
       TKey = any
     > = DevExpress.events.EventInfo<dxList<TItem, TKey>> &
       DevExpress.ui.CollectionWidget.SelectionChangedInfo<TItem>;
+    /**
+     * [descr:_ui_list_SelectionChangingEvent]
+     */
+    export type SelectionChangingEvent<
+      TItem extends ItemLike = any,
+      TKey = any
+    > = DevExpress.events.AsyncCancelable &
+      DevExpress.events.EventInfo<dxList<TItem, TKey>> &
+      DevExpress.ui.CollectionWidget.SelectionChangingInfo<TItem>;
   }
   /**
    * @deprecated Use Item instead
@@ -20311,6 +20386,12 @@ declare module DevExpress.ui {
      */
     export type SelectionChangedEvent = DevExpress.events.EventInfo<dxLookup> &
       DevExpress.ui.dxDropDownList.SelectionChangedInfo;
+    /**
+     * [descr:_ui_lookup_SelectionChangingEvent]
+     */
+    export type SelectionChangingEvent = DevExpress.events.AsyncCancelable &
+      DevExpress.events.EventInfo<dxLookup> &
+      DevExpress.ui.dxDropDownList.SelectionChangingInfo;
     export type TitleRenderedEvent = DevExpress.events.EventInfo<dxLookup> &
       DevExpress.ui.dxPopup.TitleRenderedInfo;
     /**
@@ -24883,6 +24964,12 @@ declare module DevExpress.ui {
     export type SelectionChangedEvent =
       DevExpress.events.EventInfo<dxSelectBox> &
         DevExpress.ui.dxDropDownList.SelectionChangedInfo;
+    /**
+     * [descr:_ui_select_box_SelectionChangingEvent]
+     */
+    export type SelectionChangingEvent = DevExpress.events.AsyncCancelable &
+      DevExpress.events.EventInfo<dxSelectBox> &
+      DevExpress.ui.dxDropDownList.SelectionChangingInfo;
     /**
      * [descr:_ui_select_box_ValueChangedEvent]
      */
@@ -25913,6 +26000,7 @@ declare module DevExpress.ui {
       ItemHoldEvent: ItemHoldEvent<TItem, TKey>;
       ItemRenderedEvent: ItemRenderedEvent<TItem, TKey>;
       OptionChangedEvent: OptionChangedEvent<TItem, TKey>;
+      SelectionChangingEvent: SelectionChangingEvent<TItem, TKey>;
       SelectionChangedEvent: SelectionChangedEvent<TItem, TKey>;
       TitleClickEvent: TitleClickEvent<TItem, TKey>;
       TitleHoldEvent: TitleHoldEvent<TItem, TKey>;
@@ -25990,6 +26078,15 @@ declare module DevExpress.ui {
       TKey = any
     > = DevExpress.events.EventInfo<dxTabPanel<TItem, TKey>> &
       DevExpress.ui.CollectionWidget.SelectionChangedInfo<TItem>;
+    /**
+     * [descr:_ui_tab_panel_SelectionChangingEvent]
+     */
+    export type SelectionChangingEvent<
+      TItem extends ItemLike = any,
+      TKey = any
+    > = DevExpress.events.AsyncCancelable &
+      DevExpress.events.EventInfo<dxTabPanel<TItem, TKey>> &
+      DevExpress.ui.CollectionWidget.SelectionChangingInfo<TItem>;
     /**
      * [descr:TabPanelItemInfo]
      * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
@@ -26182,6 +26279,7 @@ declare module DevExpress.ui {
       ItemRenderedEvent: ItemRenderedEvent<TItem, TKey>;
       OptionChangedEvent: OptionChangedEvent<TItem, TKey>;
       SelectionChangedEvent: SelectionChangedEvent<TItem, TKey>;
+      SelectionChangingEvent: SelectionChangingEvent<TItem, TKey>;
     };
     /**
      * [descr:_ui_tabs_InitializedEvent]
@@ -26255,6 +26353,15 @@ declare module DevExpress.ui {
       TKey = any
     > = DevExpress.events.EventInfo<dxTabs<TItem, TKey>> &
       DevExpress.ui.CollectionWidget.SelectionChangedInfo<TItem>;
+    /**
+     * [descr:_ui_tabs_SelectionChangingEvent]
+     */
+    export type SelectionChangingEvent<
+      TItem extends ItemLike = any,
+      TKey = any
+    > = DevExpress.events.AsyncCancelable &
+      DevExpress.events.EventInfo<dxTabs<TItem, TKey>> &
+      DevExpress.ui.CollectionWidget.SelectionChangingInfo<TItem>;
   }
   /**
    * [descr:dxTabsOptions]
@@ -26470,6 +26577,14 @@ declare module DevExpress.ui {
       DevExpress.ui.CollectionWidget.SelectionChangedInfo<
         string | number | any
       >;
+    /**
+     * [descr:_ui_tag_box_SelectionChangingEvent]
+     */
+    export type SelectionChangingEvent = DevExpress.events.AsyncCancelable &
+      DevExpress.events.EventInfo<dxTagBox> &
+      DevExpress.ui.CollectionWidget.SelectionChangingInfo<
+        string | number | any
+      >;
     /**
      * [descr:_ui_tag_box_ValueChangedEvent]
      */
@@ -26487,7 +26602,10 @@ declare module DevExpress.ui {
   export interface dxTagBoxOptions
     extends Pick<
       dxSelectBoxOptions<dxTagBox>,
-      Exclude<keyof dxSelectBoxOptions<dxTagBox>, 'onSelectionChanged'>
+      Exclude<
+        keyof dxSelectBoxOptions<dxTagBox>,
+        'onSelectionChanged' | 'onSelectionChanging'
+      >
     > {
     /**
      * [descr:dxTagBoxOptions.applyValueMode]
@@ -26517,6 +26635,12 @@ declare module DevExpress.ui {
     onSelectAllValueChanged?: (
       e: DevExpress.ui.dxTagBox.SelectAllValueChangedEvent
     ) => void;
+    /**
+     * [descr:dxTagBoxOptions.onSelectionChanging]
+     */
+    onSelectionChanging?: (
+      e: DevExpress.ui.dxTagBox.SelectionChangingEvent
+    ) => void;
     /**
      * [descr:dxTagBoxOptions.onSelectionChanged]
      */