Editors and Overlays: remove deprecated options (DevExpress#30201)

Signed-off-by: Aleksei Semikozov <[email protected]>
Co-authored-by: Aleksei Semikozov <[email protected]>
Co-authored-by: Aleksei Semikozov <[email protected]>
Co-authored-by: marker dao ® <[email protected]>

Author: 4 people

packages/devextreme/js/__internal/ui/context_menu/m_context_menu.ts

@@ -153,13 +153,6 @@ class ContextMenu extends MenuBase {
     }]);
   }
 
-  _setDeprecatedOptions(): void {
-    super._setDeprecatedOptions();
-    extend(this._deprecatedOptions, {
-      closeOnOutsideClick: { since: '22.2', alias: 'hideOnOutsideClick' },
-    });
-  }
-
   _initActions(): void {
     this._actions = {};
 
@@ -630,15 +623,13 @@ class ContextMenu extends MenuBase {
   }
 
   _shouldHideOnOutsideClick(e) {
-    // @ts-expect-error
-    const { closeOnOutsideClick, hideOnOutsideClick } = this.option();
+    const hideOnOutsideClick = this.option('hideOnOutsideClick');
 
     if (isFunction(hideOnOutsideClick)) {
       return hideOnOutsideClick(e);
-    } if (isFunction(closeOnOutsideClick)) {
-      return closeOnOutsideClick(e);
     }
-    return hideOnOutsideClick || closeOnOutsideClick;
+
+    return hideOnOutsideClick;
   }
 
   _hideOnOutsideClickHandler(e): boolean {

packages/devextreme/js/__internal/ui/drop_down_editor/m_drop_down_editor.ts

@@ -635,7 +635,6 @@ class DropDownEditor<
   _renderPopup(): void {
     const popupConfig = extend(this._popupConfig(), this._options.cache('dropDownOptions'));
 
-    delete popupConfig.closeOnOutsideClick;
     // @ts-expect-error ts-error
     this._popup = this._createComponent(this._$popup, Popup, popupConfig);
 

packages/devextreme/js/__internal/ui/html_editor/modules/m_toolbar.ts

@@ -241,24 +241,6 @@ if (Quill) {
       return $container;
     }
 
-    _detectRenamedOptions(item) {
-      const optionsInfo = [{
-        newName: 'name',
-        oldName: 'formatName',
-      }, {
-        newName: 'acceptedValues',
-        oldName: 'formatValues',
-      }];
-
-      if (isObject(item)) {
-        each(optionsInfo, (index, optionName) => {
-          if (Object.prototype.hasOwnProperty.call(item, optionName.oldName)) {
-            errors.log('W1016', optionName.oldName, optionName.newName);
-          }
-        });
-      }
-    }
-
     _subscribeFormatHotKeys() {
       this.quill.keyboard.addBinding({
         which: KEY_CODES.b,
@@ -299,7 +281,6 @@ if (Quill) {
 
       each(this.options.items, (index, item) => {
         let newItem;
-        this._detectRenamedOptions(item);
         if (isObject(item)) {
           newItem = this._handleObjectItem(item);
         } else if (item === TOOLBAR_AI_ITEM_NAME) {

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

@@ -154,13 +154,6 @@ class Lookup extends DropDownList<LookupProperties> {
     };
   }
 
-  _setDeprecatedOptions() {
-    super._setDeprecatedOptions();
-    extend(this._deprecatedOptions, {
-      valueChangeEvent: { since: '22.1', alias: 'searchStartEvent' },
-    });
-  }
-
   _defaultOptionsRules() {
     const themeName = current();
 
@@ -710,8 +703,7 @@ class Lookup extends DropDownList<LookupProperties> {
       // @ts-expect-error ts-error
       shading: dropDownOptions.shading,
       // @ts-expect-error ts-error
-      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-      hideOnOutsideClick: dropDownOptions.hideOnOutsideClick || dropDownOptions.closeOnOutsideClick,
+      hideOnOutsideClick: dropDownOptions.hideOnOutsideClick,
       _loopFocus: shouldLoopFocusInsidePopup,
     });
 

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

@@ -206,7 +206,6 @@ class SelectBox<
       placeholder: messageLocalization.format('Select'),
       fieldTemplate: null,
       customItemCreateEvent: 'change',
-      valueChangeEvent: 'change',
       acceptCustomValue: false,
       onCustomItemCreating(e): void {
         if (!isDefined(e.customItem)) {
@@ -248,13 +247,6 @@ class SelectBox<
     return `${super._popupWrapperClass()} ${SELECTBOX_POPUP_WRAPPER_CLASS}`;
   }
 
-  _setDeprecatedOptions(): void {
-    super._setDeprecatedOptions();
-    extend(this._deprecatedOptions, {
-      valueChangeEvent: { since: '22.2', alias: 'customItemCreateEvent' },
-    });
-  }
-
   _cancelEditing(): void {
     if (!this.option('searchEnabled') && this._list) {
       this._focusListElement(null);

packages/devextreme/js/__internal/ui/overlay/m_overlay.ts

@@ -202,7 +202,6 @@ class Overlay<
           },
         },
       },
-      closeOnOutsideClick: false,
       hideOnOutsideClick: false,
       _ignorePreventScrollEventsDeprecation: false,
       onShowing: null,
@@ -257,13 +256,6 @@ class Overlay<
     return this._$content;
   }
 
-  _setDeprecatedOptions(): void {
-    super._setDeprecatedOptions();
-    extend(this._deprecatedOptions, {
-      closeOnOutsideClick: { since: '22.1', alias: 'hideOnOutsideClick' },
-    });
-  }
-
   ctor(element: Element, options: TProperties): void {
     super.ctor(element, options);
 
@@ -1350,7 +1342,6 @@ class Overlay<
         this._toggleHideOnParentsScrollSubscription(visible);
         break;
       }
-      case 'closeOnOutsideClick':
       case 'hideOnOutsideClick':
       case 'propagateOutsideClick':
         break;

packages/devextreme/js/__internal/ui/speed_dial_action/m_speed_dial_main_item.ts

@@ -73,8 +73,6 @@ const modifyActionOptions = (action) => {
 
 export interface SpeedDialMainItemProperties extends SpeedDialItemProperties {
   maxSpeedDialActionCount: number;
-
-  closeOnOutsideClick?: boolean;
 }
 
 class SpeedDialMainItem extends SpeedDialItem {
@@ -219,8 +217,6 @@ class SpeedDialMainItem extends SpeedDialItem {
 
     const defaultOptions = this._getDefaultOptions();
 
-    delete defaultOptions.closeOnOutsideClick;
-
     return visibleActions.length === 1
       ? extend(modifyActionOptions(visibleActions[0]), { position: this._getPosition() })
       : extend(defaultOptions, { visible: visibleActions.length !== 0 });

packages/devextreme/js/ui/widget/ui.errors.js

@@ -316,11 +316,6 @@ export default errorUtils(errors.ERROR_MESSAGES, {
     */
     W1014: 'The Floating Action Button exceeds the recommended speed dial action count. If you need to display more speed dial actions, increase the maxSpeedDialActionCount option value in the global config.',
 
-    /**
-    * @name ErrorsUIWidgets.W1016
-    */
-    W1016: 'The \'{0}\' field in the HTML Editor toolbar item configuration was renamed to \'{1}\'. Please make a corresponding change in your code.',
-
     /**
     * @name ErrorsUIWidgets.W1017
     */

packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/lookup.tests.js

@@ -4680,43 +4680,24 @@ QUnit.module('searchStartEvent', {
         init();
     }
 }, () => {
-    ['valueChangeEvent', 'searchStartEvent'].forEach((propName) => {
-        QUnit.test(`${propName} specifies event to start search`, function(assert) {
-            this.reinit({ [propName]: 'change' });
+    QUnit.test('searchStartEvent specifies event to start search', function(assert) {
+        this.reinit({ searchStartEvent: 'change' });
 
-            this.keyboard.type('11');
-            assert.strictEqual(this.getItemsCount(), 3, 'items are not filtered');
+        this.keyboard.type('11');
+        assert.strictEqual(this.getItemsCount(), 3, 'items are not filtered');
 
-            this.keyboard.change();
-            assert.strictEqual(this.getItemsCount(), 2, 'items are filtered after search start event is fired');
-        });
-
-        QUnit.test(`${propName} specifies event to start search (runtime change)`, function(assert) {
-            this.lookup.option(propName, 'change');
-
-            this.keyboard.type('11');
-            assert.strictEqual(this.getItemsCount(), 3, 'items are not filtered');
-
-            this.keyboard.change();
-            assert.strictEqual(this.getItemsCount(), 2, 'items are filtered after search start event is fired');
-        });
+        this.keyboard.change();
+        assert.strictEqual(this.getItemsCount(), 2, 'items are filtered after search start event is fired');
     });
 
-    QUnit.test('valueChangeEvent prop using should raise a warning about deprecation', function(assert) {
-        sinon.spy(errors, 'log');
+    QUnit.test('searchStartEvent specifies event to start search (runtime change)', function(assert) {
+        this.lookup.option('searchStartEvent', 'change');
 
-        try {
-            this.lookup.option('valueChangeEvent', 'change');
-            assert.deepEqual(errors.log.lastCall.args, [
-                'W0001',
-                'dxLookup',
-                'valueChangeEvent',
-                '22.1',
-                'Use the \'searchStartEvent\' option instead'
-            ], 'warning is raised with correct parameters');
-        } finally {
-            errors.log.restore();
-        }
+        this.keyboard.type('11');
+        assert.strictEqual(this.getItemsCount(), 3, 'items are not filtered');
+
+        this.keyboard.change();
+        assert.strictEqual(this.getItemsCount(), 2, 'items are filtered after search start event is fired');
     });
 
     QUnit.test('no warning should be logged on pure init', function(assert) {

packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/selectBox.tests.js

@@ -85,8 +85,6 @@ const KEY_SPACE = ' ';
 
 const TIME_TO_WAIT = 500;
 
-const VALUE_CHANGE_EVENT_OPTIONS = ['valueChangeEvent', 'customItemCreateEvent'];
-
 const toSelector = (className) => {
     return '.' + className;
 };
@@ -4277,37 +4275,35 @@ QUnit.module('Scrolling', {
 });
 
 QUnit.module('Async tests', {}, () => {
-    VALUE_CHANGE_EVENT_OPTIONS.forEach(eventOptionName => {
-        QUnit.testInActiveWindow(`Value should be reset after on selectedItem after focusout when ${eventOptionName}='change'`, function(assert) {
-            const done = assert.async();
-            const items = [1, 2];
-            const $selectBox = $('#selectBox').dxSelectBox({
-                searchEnabled: true,
-                items: items,
-                value: items[0],
-                [eventOptionName]: 'change',
-                searchTimeout: 0
-            });
-            const selectBox = $selectBox.dxSelectBox('instance');
-            const $input = $selectBox.find(toSelector(TEXTEDITOR_INPUT_CLASS));
-            const keyboard = keyboardMock($input);
+    QUnit.testInActiveWindow('Value should be reset after on selectedItem after focusout when customItemCreateEvent=\'change\'', function(assert) {
+        const done = assert.async();
+        const items = [1, 2];
+        const $selectBox = $('#selectBox').dxSelectBox({
+            searchEnabled: true,
+            items: items,
+            value: items[0],
+            customItemCreateEvent: 'change',
+            searchTimeout: 0
+        });
+        const selectBox = $selectBox.dxSelectBox('instance');
+        const $input = $selectBox.find(toSelector(TEXTEDITOR_INPUT_CLASS));
+        const keyboard = keyboardMock($input);
 
-            $input.focus();
+        $input.focus();
 
-            keyboard
-                .press('end')
-                .press('backspace')
-                .type('2');
+        keyboard
+            .press('end')
+            .press('backspace')
+            .type('2');
 
-            $input.blur();
+        $input.blur();
 
-            setTimeout(() => {
-                assert.equal(selectBox.option('value'), items[0], 'value is not changed');
-                assert.equal(selectBox.option('selectedItem'), items[0], 'selectedItem is not changed');
-                assert.equal($input.val(), items[0], 'input is reset');
-                done();
-            }, 0);
-        });
+        setTimeout(() => {
+            assert.equal(selectBox.option('value'), items[0], 'value is not changed');
+            assert.equal(selectBox.option('selectedItem'), items[0], 'selectedItem is not changed');
+            assert.equal($input.val(), items[0], 'input is reset');
+            done();
+        }, 0);
     });
 
     QUnit.test('the selected item should be visible if the data source is loaded after the delay (T386513)', function(assert) {
@@ -6493,18 +6489,16 @@ QUnit.module('valueChanged handler should receive correct event', {
         this.testProgramChange(assert);
     });
 
-    VALUE_CHANGE_EVENT_OPTIONS.forEach(eventOptionName => {
-        QUnit.test(`on input if ${eventOptionName}=input and acceptCustomValue=true`, function(assert) {
-            this.reinit({
-                acceptCustomValue: true,
-                [eventOptionName]: 'input',
-            });
+    QUnit.test('on input if customItemCreateEvent=input and acceptCustomValue=true', function(assert) {
+        this.reinit({
+            acceptCustomValue: true,
+            customItemCreateEvent: 'input',
+        });
 
-            this.keyboard.type('1');
+        this.keyboard.type('1');
 
-            this.checkEvent(assert, 'input', this.$input);
-            this.testProgramChange(assert);
-        });
+        this.checkEvent(assert, 'input', this.$input);
+        this.testProgramChange(assert);
     });
 
     ['del', 'backspace'].forEach(key => {
@@ -6567,63 +6561,6 @@ QUnit.module('displayExpr', moduleSetup, () => {
     });
 });
 
-QUnit.module('The "customItemCreateEvent" option warning', {
-    beforeEach: function() {
-        this.$selectBox = $('#selectBox');
-
-        const defaultOptions = {
-            items: ['item 1'],
-            acceptCustomValue: true,
-            onCustomItemCreating: (e) => {
-                e.customItem = e.text;
-            }
-        };
-
-        const init = (options = {}) => {
-            this.selectBox = this.$selectBox
-                .dxSelectBox($.extend({}, defaultOptions, options))
-                .dxSelectBox('instance');
-        };
-
-        this.reinit = (options) => {
-            this.selectBox.dispose();
-            init(options);
-        };
-
-        init();
-    }
-}, () => {
-    QUnit.test('valueChangeEvent prop using should raise a warning about deprecation', function(assert) {
-        const errorsSpy = sinon.spy(errors, 'log');
-
-        try {
-            this.selectBox.option('valueChangeEvent', 'change');
-
-            assert.deepEqual(errorsSpy.lastCall.args, [
-                'W0001',
-                'dxSelectBox',
-                'valueChangeEvent',
-                '22.2',
-                'Use the \'customItemCreateEvent\' option instead'
-            ], 'warning is raised with correct parameters');
-        } finally {
-            errorsSpy.restore();
-        }
-    });
-
-    QUnit.test('no warning should be logged on pure init', function(assert) {
-        const errorsSpy = sinon.spy(errors, 'log');
-
-        try {
-            this.reinit();
-            this.selectBox.option('customItemCreateEvent', 'change');
-        } finally {
-            assert.strictEqual(errorsSpy.callCount, 0, 'no warning is logged');
-            errorsSpy.restore();
-        }
-    });
-});
-
 QUnit.module('the "customItemCreateEvent" option', {
     beforeEach: function() {
         this.$selectBox = $('#selectBox').dxSelectBox({