diff --git a/packages/devextreme/js/__internal/filter_builder/m_filter_builder.ts b/packages/devextreme/js/__internal/filter_builder/m_filter_builder.ts index 663972befbaf..02f508702452 100644 --- a/packages/devextreme/js/__internal/filter_builder/m_filter_builder.ts +++ b/packages/devextreme/js/__internal/filter_builder/m_filter_builder.ts @@ -891,10 +891,7 @@ class FilterBuilder extends Widget { // T852701 this.repaint(); }, - _ignoreFunctionValueDeprecation: true, - maxHeight() { - return getElementMaxHeightByWindow(options.menu.position.of); - }, + maxHeight: getElementMaxHeightByWindow(options.menu.position.of), visible: true, focusStateEnabled: false, preventScrollEvents: false, diff --git a/packages/devextreme/js/__internal/scheduler/__tests__/__mock__/create_appointment_popup.ts b/packages/devextreme/js/__internal/scheduler/__tests__/__mock__/create_appointment_popup.ts index 04edfa46297e..007fd3884920 100644 --- a/packages/devextreme/js/__internal/scheduler/__tests__/__mock__/create_appointment_popup.ts +++ b/packages/devextreme/js/__internal/scheduler/__tests__/__mock__/create_appointment_popup.ts @@ -167,6 +167,7 @@ export const createAppointmentPopup = async ( const title = options.title ?? 'New Appointment'; const readOnly = options.readOnly ?? false; + // @ts-expect-error onSave popup.show(appointmentData, { onSave, title, readOnly }); await new Promise(process.nextTick); diff --git a/packages/devextreme/js/__internal/scheduler/appointment_popup/appointment_popup.test.ts b/packages/devextreme/js/__internal/scheduler/appointment_popup/appointment_popup.test.ts index b945eab02b5a..3005f81feed4 100644 --- a/packages/devextreme/js/__internal/scheduler/appointment_popup/appointment_popup.test.ts +++ b/packages/devextreme/js/__internal/scheduler/appointment_popup/appointment_popup.test.ts @@ -125,6 +125,7 @@ describe('Isolated AppointmentPopup environment', () => { const onSave = jest.fn((newAppointment: Record) => { updateAppointment(sourceAppointment, updatedAppointment); + // @ts-expect-error Expected 0 arguments, but got 1 return addAppointment(newAppointment); }); diff --git a/packages/devextreme/js/__internal/ui/date_box/date_box.base.ts b/packages/devextreme/js/__internal/ui/date_box/date_box.base.ts index 25067897fc2c..9ef583636c1c 100644 --- a/packages/devextreme/js/__internal/ui/date_box/date_box.base.ts +++ b/packages/devextreme/js/__internal/ui/date_box/date_box.base.ts @@ -278,6 +278,14 @@ class DateBox extends DropDownEditor { this._updatePopupHeight(); } + _updatePopupWidth(): void { + if (this._strategy instanceof Calendar || this._strategy instanceof CalendarWithTime) { + return; + } + + super._updatePopupWidth(); + } + _dimensionChanged(): void { super._dimensionChanged(); diff --git a/packages/devextreme/js/__internal/ui/drop_down_editor/m_drop_down_editor.ts b/packages/devextreme/js/__internal/ui/drop_down_editor/m_drop_down_editor.ts index 1a3e30e13056..06be46a2681d 100644 --- a/packages/devextreme/js/__internal/ui/drop_down_editor/m_drop_down_editor.ts +++ b/packages/devextreme/js/__internal/ui/drop_down_editor/m_drop_down_editor.ts @@ -866,9 +866,7 @@ class DropDownEditor< }), // @ts-expect-error ts-error showTitle: this.option('dropDownOptions.showTitle'), - _ignoreFunctionValueDeprecation: true, - // @ts-expect-error ts-error - width: (): number => getElementWidth(this.$element()), + width: getElementWidth(this.$element()), height: 'auto', shading: false, hideOnParentScroll: true, @@ -925,10 +923,10 @@ class DropDownEditor< } _updatePopupWidth(): void { - const popupWidth = getSizeValue(this.option('dropDownOptions.width')); + const popupWidth = getSizeValue(this.option('_cached_dropDownOptions.width')); if (popupWidth === undefined) { - this._setPopupOption('width', () => getElementWidth(this.$element())); + this._setPopupOption('width', getElementWidth(this.$element())); } } @@ -1168,6 +1166,7 @@ class DropDownEditor< case 'width': case 'height': super._optionChanged(args); + this._updatePopupWidth(); this._popup?.repaint(); break; case 'opened': diff --git a/packages/devextreme/js/__internal/ui/m_drop_down_box.ts b/packages/devextreme/js/__internal/ui/m_drop_down_box.ts index d16be426a8bf..dcb5a91bd635 100644 --- a/packages/devextreme/js/__internal/ui/m_drop_down_box.ts +++ b/packages/devextreme/js/__internal/ui/m_drop_down_box.ts @@ -296,6 +296,8 @@ class DropDownBox< position: extend(this.option('popupPosition'), { of: this.$element(), }), + // The overlay calls maxHeight every time it calculates the content dimensions, + // this._popupPosition?.v.location, which is updated after each repositioning _ignoreFunctionValueDeprecation: true, // @ts-expect-error ts-error maxHeight: function () { diff --git a/packages/devextreme/js/__internal/ui/m_drop_down_button.ts b/packages/devextreme/js/__internal/ui/m_drop_down_button.ts index 28fa8ddca71b..1f3fc018f6f2 100644 --- a/packages/devextreme/js/__internal/ui/m_drop_down_button.ts +++ b/packages/devextreme/js/__internal/ui/m_drop_down_button.ts @@ -409,8 +409,7 @@ class DropDownButton extends Widget { type: 'fade', duration: 400, from: 1, to: 0, }, }, - _ignoreFunctionValueDeprecation: true, - width: () => getElementWidth(this.$element()), + width: getElementWidth(this.$element()), height: 'auto', shading: false, position: { @@ -532,7 +531,7 @@ class DropDownButton extends Widget { const popupWidth = getSizeValue(this.option('dropDownOptions.width')); if (popupWidth === undefined) { - this._setPopupOption('width', () => getElementWidth(this.$element())); + this._setPopupOption('width', getElementWidth(this.$element())); } } diff --git a/packages/devextreme/js/__internal/ui/m_lookup.ts b/packages/devextreme/js/__internal/ui/m_lookup.ts index ac3b400977a3..0e8a556b7c5e 100644 --- a/packages/devextreme/js/__internal/ui/m_lookup.ts +++ b/packages/devextreme/js/__internal/ui/m_lookup.ts @@ -130,14 +130,10 @@ class Lookup extends DropDownList { focusStateEnabled: false, dropDownOptions: { showTitle: true, - // @ts-expect-error ts-error - width() { - return getSize('width'); - }, - // @ts-expect-error ts-error - height() { - return getSize('height'); - }, + // @ts-expect-error Category 3 — There is no built-in mechanism for mandatory updates + width: () => getSize('width'), + // @ts-expect-error Category 3 — There is no built-in mechanism for mandatory updates + height: () => getSize('height'), shading: true, hideOnOutsideClick: true, animation: {}, @@ -218,7 +214,7 @@ class Lookup extends DropDownList { dropDownOptions: { _ignoreFunctionValueDeprecation: true, - width: () => getElementWidth(this.$element()), + width: getElementWidth(this.$element()), height: function () { return this._getPopupHeight(); }.bind(this), showTitle: false, @@ -819,6 +815,7 @@ class Lookup extends DropDownList { this.option('dropDownOptions.width', getWidth(this.$element())); } + this._updatePopupWidth(); this._updateListDimensions(); } diff --git a/packages/devextreme/js/__internal/ui/menu/menu.ts b/packages/devextreme/js/__internal/ui/menu/menu.ts index 3ea2e78dc175..dc90fa51ce72 100644 --- a/packages/devextreme/js/__internal/ui/menu/menu.ts +++ b/packages/devextreme/js/__internal/ui/menu/menu.ts @@ -144,13 +144,10 @@ class Menu extends MenuBase { _hoveredRootItem?: dxElementWrapper | null; - // eslint-disable-next-line no-restricted-globals _showSubmenuTimer?: ReturnType | number; - // eslint-disable-next-line no-restricted-globals _hideSubmenuTimer?: ReturnType; - // eslint-disable-next-line no-restricted-globals _resizeEventTimer?: ReturnType; // @ts-expect-error ts-error @@ -343,7 +340,9 @@ class Menu extends MenuBase { } const containerWidth: number = getOuterWidth(this.$element()); + this._toggleAdaptiveMode(this._menuItemsWidth > containerWidth); + this._overlay?.option('maxHeight', getElementMaxHeightByWindow(this.$element())); } _init(): void { @@ -473,9 +472,7 @@ class Menu extends MenuBase { const position = rtlEnabled ? 'right' : 'left'; return { - _ignoreFunctionValueDeprecation: true, - // @ts-expect-error ts-error - maxHeight: () => getElementMaxHeightByWindow(this.$element()), + maxHeight: getElementMaxHeightByWindow(this.$element()), deferRendering: false, shading: false, // @ts-expect-error ts-error diff --git a/packages/devextreme/js/__internal/ui/toolbar/internal/toolbar.menu.ts b/packages/devextreme/js/__internal/ui/toolbar/internal/toolbar.menu.ts index 3abd4963b1cc..b74b0d57e877 100644 --- a/packages/devextreme/js/__internal/ui/toolbar/internal/toolbar.menu.ts +++ b/packages/devextreme/js/__internal/ui/toolbar/internal/toolbar.menu.ts @@ -253,9 +253,7 @@ export default class DropDownMenu extends Widget { preventScrollEvents: false, _ignorePreventScrollEventsDeprecation: true, contentTemplate: (contentElement) => this._renderList(contentElement), - _ignoreFunctionValueDeprecation: true, - // @ts-expect-error - maxHeight: () => this._getMaxHeight(), + maxHeight: this._getMaxHeight(), position: { // @ts-expect-error my: `top ${rtlEnabled ? 'left' : 'right'}`, @@ -324,6 +322,10 @@ export default class DropDownMenu extends Widget { ); } + _dimensionChanged(): void { + this._popup?.option('maxHeight', this._getMaxHeight()); + } + _closeOutsideDropDownHandler( e: DxEvent, ): boolean { diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/lookup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/lookup.tests.js index 1d30b961026d..aac44d7fbfbb 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/lookup.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/lookup.tests.js @@ -3719,7 +3719,7 @@ QUnit.module('default options', { const lookup = $lookup.dxLookup({ dataSource: ['blue', 'orange', 'lime', 'purple'] }).dxLookup('instance'); - assert.equal(lookup.option('dropDownOptions.width')(), $lookup.outerWidth(), 'popup width match with lookup field width'); + assert.equal(lookup.option('dropDownOptions.width'), $lookup.outerWidth(), 'popup width match with lookup field width'); $(lookup.field()).trigger('dxclick'); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/filterBuilderParts/commonTests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/filterBuilderParts/commonTests.js index ca5b2b8a9636..cd29b670b91a 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/filterBuilderParts/commonTests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/filterBuilderParts/commonTests.js @@ -259,7 +259,7 @@ QUnit.module('Rendering', function() { const maxHeight = popup.option('maxHeight'); const positionCollision = popup.option('position.collision'); - assert.ok(Math.floor(maxHeight()) < windowHeight(), 'maxHeight is correct'); + assert.ok(Math.floor(maxHeight) < windowHeight(), 'maxHeight is correct'); assert.equal(positionCollision, 'flip', 'collision is correct'); } finally { scrollTop.restore(); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/menu.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/menu.tests.js index 6e231d9a2630..e1814f605677 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/menu.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/menu.tests.js @@ -3242,20 +3242,20 @@ QUnit.module('adaptivity: render', { }); QUnit.test('maxHeight should be 90% of maximum of top or bottom offsets when height of overlay content more windows height', function(assert) { + const scrollTop = sinon.stub(renderer.fn, 'scrollTop').returns(100); + const windowHeight = sinon.stub(implementationsMap, 'getInnerHeight').returns(700); + const offset = sinon.stub(renderer.fn, 'offset').returns({ left: 0, top: 200 }); + new Menu(this.$element, { items: this.items, adaptivityEnabled: true }); - const scrollTop = sinon.stub(renderer.fn, 'scrollTop').returns(100); - const windowHeight = sinon.stub(implementationsMap, 'getInnerHeight').returns(700); - const offset = sinon.stub(renderer.fn, 'offset').returns({ left: 0, top: 200 }); - try { const overlay = this.$element.find('.dx-overlay').dxOverlay('instance'); const maxHeight = overlay.option('maxHeight'); - assert.ok(Math.floor(maxHeight()) < windowHeight(), 'maxHeight is correct'); + assert.ok(Math.floor(maxHeight) < windowHeight(), 'maxHeight is correct'); assert.ok(overlay.$wrapper().hasClass(DX_ADAPTIVE_MODE_OVERLAY_WRAPPER_CLASS), 'special class for overlay wrapper'); } finally { scrollTop.restore();