From 8c32023c5ac710948ddc4bd28ef6823c17ee5df3 Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Tue, 24 Dec 2024 18:41:16 +0400 Subject: [PATCH] Widget: remove excess typing file --- .../js/__internal/core/widget/component.ts | 28 ++-- .../__internal/core/widget/dom_component.ts | 4 +- .../js/__internal/core/widget/widget.ts | 2 +- .../filter_builder/m_filter_builder.ts | 6 +- .../grid_core/context_menu/m_context_menu.ts | 1 + .../grids/grid_core/editing/m_editing.ts | 1 - .../m_keyboard_navigation.ts | 1 - .../grids/grid_core/views/m_grid_view.ts | 10 +- .../scheduler/appointments/m_appointment.ts | 7 +- .../__internal/scheduler/header/m_calendar.ts | 9 +- .../__internal/scheduler/header/m_header.ts | 2 +- .../scheduler/workspaces/m_work_space.ts | 9 +- .../ui/calendar/m_calendar.navigator.ts | 29 ++-- .../js/__internal/ui/collection/base.ts | 3 +- .../ui/context_menu/m_context_menu.ts | 16 +- .../__internal/ui/context_menu/m_menu_base.ts | 16 +- .../ui/date_range_box/m_date_range_box.ts | 4 +- .../devextreme/js/__internal/ui/editor.ts | 13 +- .../ui/html_editor/ui/m_formDialog.ts | 1 - .../js/__internal/ui/m_defer_rendering.ts | 1 - .../js/__internal/ui/m_file_uploader.ts | 48 +++--- .../js/__internal/ui/m_validation_group.ts | 3 +- .../js/__internal/ui/menu/m_menu.ts | 27 ++-- .../js/__internal/ui/menu/m_submenu.ts | 7 +- .../ui/radio_group/m_radio_group.ts | 16 +- .../speed_dial_action/m_speed_dial_action.ts | 4 +- .../ui/speed_dial_action/m_speed_dial_item.ts | 2 - .../m_speed_dial_main_item.ts | 3 - .../js/__internal/ui/splitter/splitter.ts | 11 +- .../__internal/ui/splitter/splitter_item.ts | 2 +- .../ui/toolbar/internal/m_toolbar.menu.ts | 25 ++-- .../__internal/ui/toolbar/m_toolbar.base.ts | 13 +- .../js/__internal/ui/toolbar/m_toolbar.ts | 3 +- .../toolbar/strategy/m_toolbar.singleline.ts | 13 +- .../devextreme/js/__internal/ui/widget.ts | 90 ----------- .../devextreme/js/core/dom_component.d.ts | 5 +- packages/devextreme/ts/dx.all.d.ts | 141 +++++++++++++++++- 37 files changed, 304 insertions(+), 272 deletions(-) delete mode 100644 packages/devextreme/js/__internal/ui/widget.ts diff --git a/packages/devextreme/js/__internal/core/widget/component.ts b/packages/devextreme/js/__internal/core/widget/component.ts index 17ae60df9b1a..243e676404e6 100644 --- a/packages/devextreme/js/__internal/core/widget/component.ts +++ b/packages/devextreme/js/__internal/core/widget/component.ts @@ -1,6 +1,7 @@ import Action from '@js/core/action'; import Class from '@js/core/class'; import type { + Component as PublicComponent, ComponentOptions, } from '@js/core/component'; import Config from '@js/core/config'; @@ -45,7 +46,7 @@ export class Component< TProperties extends Properties, // @ts-expect-error dxClass inheritance issue // eslint-disable-next-line @typescript-eslint/ban-types -> extends (Class.inherit({}) as new() => {}) { +> extends (Class.inherit({}) as new() => {}) implements PublicComponent { _deprecatedOptions!: Partial; _options!: Options; @@ -285,8 +286,8 @@ export class Component< } } - instance(): TComponent { - return this as unknown as TComponent; + instance(): this { + return this; } beginUpdate(): void { @@ -372,7 +373,7 @@ export class Component< _createActionByOption( optionName: string, - config: Record, + config?: Record, ): (event?: Record) => void { // eslint-disable-next-line @typescript-eslint/init-declarations let action; @@ -406,15 +407,16 @@ export class Component< actionFunc = this.option(optionName); } - if (!action && !actionFunc && !config.beforeExecute - && !config.afterExecute && !this._eventsStrategy.hasEvent(eventName)) { + if (!action && !actionFunc && !config?.beforeExecute + && !config?.afterExecute && !this._eventsStrategy.hasEvent(eventName)) { return; } if (!action) { + // @ts-expect-error const { beforeExecute } = config; + // @ts-expect-error config.beforeExecute = (...props): void => { - // @ts-expect-error // eslint-disable-next-line max-len // eslint-disable-next-line @typescript-eslint/prefer-optional-chain, @typescript-eslint/no-unused-expressions beforeExecute && beforeExecute.apply(this, props); @@ -447,16 +449,17 @@ export class Component< return onActionCreated(this, result, config) || result; } - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types - on(eventName: string, eventHandler): TComponent { + // eslint-disable-next-line max-len + // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/ban-types + on(eventName: string | { [key: string]: Function }, eventHandler?): this { this._eventsStrategy.on(eventName, eventHandler); - return this as unknown as TComponent; + return this; } // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types - off(eventName: string, eventHandler): TComponent { + off(eventName: string, eventHandler?): this { this._eventsStrategy.off(eventName, eventHandler); - return this as unknown as TComponent; + return this; } hasActionSubscription(actionName: string): boolean { @@ -490,6 +493,7 @@ export class Component< return value; } + // @ts-expect-error // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types option(...args): TProperties { // eslint-disable-next-line @typescript-eslint/no-unsafe-return diff --git a/packages/devextreme/js/__internal/core/widget/dom_component.ts b/packages/devextreme/js/__internal/core/widget/dom_component.ts index 16b821f280cf..3c97afc0d8ab 100644 --- a/packages/devextreme/js/__internal/core/widget/dom_component.ts +++ b/packages/devextreme/js/__internal/core/widget/dom_component.ts @@ -52,7 +52,7 @@ class DOMComponent< private _requireRefresh?: boolean; // eslint-disable-next-line @typescript-eslint/no-explicit-any - private _templateManager?: any; + _templateManager!: any; // eslint-disable-next-line max-len // eslint-disable-next-line @typescript-eslint/explicit-function-return-type, @typescript-eslint/explicit-module-boundary-types @@ -493,7 +493,7 @@ class DOMComponent< return this._$element; } - element(): Element { + element(): HTMLElement { const $element = this.$element(); return getPublicElement($element); diff --git a/packages/devextreme/js/__internal/core/widget/widget.ts b/packages/devextreme/js/__internal/core/widget/widget.ts index 10fed27edd87..0cb0cd3d3b3c 100644 --- a/packages/devextreme/js/__internal/core/widget/widget.ts +++ b/packages/devextreme/js/__internal/core/widget/widget.ts @@ -548,7 +548,7 @@ class Widget< this.$element().toggleClass('dx-state-independent', ignoreParentReadOnly); } - _setWidgetOption(widgetName: 'string', args: Record): void { + _setWidgetOption(widgetName: string, args: Record): void { if (!this[widgetName]) { return; } 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 abf302038afd..7259b7447d07 100644 --- a/packages/devextreme/js/__internal/filter_builder/m_filter_builder.ts +++ b/packages/devextreme/js/__internal/filter_builder/m_filter_builder.ts @@ -250,8 +250,7 @@ class FilterBuilder extends Widget { return action && action(options); } - _initMarkup() { - // @ts-expect-error + _initMarkup(): void { this.$element().addClass(FILTER_BUILDER_CLASS); // @ts-expect-error super._initMarkup(); @@ -391,11 +390,8 @@ class FilterBuilder extends Widget { _createButtonWithMenu(options) { const that = this; const removeMenu = function () { - // @ts-expect-error that.$element().find(`.${ACTIVE_CLASS}`).removeClass(ACTIVE_CLASS).attr('aria-expanded', 'false'); - // @ts-expect-error that.$element().find('.dx-overlay .dx-treeview').remove(); - // @ts-expect-error that.$element().find('.dx-overlay').remove(); }; const rtlEnabled = this.option('rtlEnabled'); diff --git a/packages/devextreme/js/__internal/grids/grid_core/context_menu/m_context_menu.ts b/packages/devextreme/js/__internal/grids/grid_core/context_menu/m_context_menu.ts index 0fd6a64790f9..a80ae3be5b6e 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/context_menu/m_context_menu.ts +++ b/packages/devextreme/js/__internal/grids/grid_core/context_menu/m_context_menu.ts @@ -113,6 +113,7 @@ export class ContextMenuView extends modules.View { }, cssClass: this.getWidgetContainerClass(), + // @ts-expect-error target: this.component.$element(), }, ); diff --git a/packages/devextreme/js/__internal/grids/grid_core/editing/m_editing.ts b/packages/devextreme/js/__internal/grids/grid_core/editing/m_editing.ts index 22df69404467..e3cedc31399b 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/editing/m_editing.ts +++ b/packages/devextreme/js/__internal/grids/grid_core/editing/m_editing.ts @@ -2154,7 +2154,6 @@ class EditingControllerImpl extends modules.ViewController { setTimeout(() => { // NOTE: if the editForm is enabled then we need to search for focused element in the document root // otherwise we need to search for element in the shadow dom - // @ts-expect-error const elementContainer = this._editForm?.element() || this.component.$element().get(0); const $focusedElement = $(domAdapter.getActiveElement(elementContainer)); const columnIndex = this._rowsView.getCellIndex($focusedElement, row.rowIndex); diff --git a/packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts b/packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts index aca95231433f..7ac77a8839a1 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts +++ b/packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts @@ -1394,7 +1394,6 @@ export class KeyboardNavigationController extends modules.ViewController { activeElementSelector += ', .dx-datagrid-rowsview .dx-row > td[tabindex]'; } - // @ts-expect-error element = this.component.$element().find(activeElementSelector).first(); } diff --git a/packages/devextreme/js/__internal/grids/grid_core/views/m_grid_view.ts b/packages/devextreme/js/__internal/grids/grid_core/views/m_grid_view.ts index 738fcdf312b7..f2735be2e366 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/views/m_grid_view.ts +++ b/packages/devextreme/js/__internal/grids/grid_core/views/m_grid_view.ts @@ -198,7 +198,6 @@ export class ResizingController extends modules.ViewController { const widgetStatusText = messageLocalization // @ts-expect-error Badly typed format method .format(widgetAriaLabel, totalItemsCount, columnCount); - // @ts-expect-error Badly typed dxElementWrapper const $ariaLabelElement = this.component.$element().children(`.${GRIDBASE_CONTAINER_CLASS}`); // @ts-expect-error Treelist Variable const expandableWidgetAriaLabel = messageLocalization.format(this._expandableWidgetAriaId); @@ -361,7 +360,6 @@ export class ResizingController extends modules.ViewController { this._toggleContentMinHeight(wordWrapEnabled); // T1047239 - // @ts-expect-error if ($element && $element.get(0) && this._maxWidth) { delete this._maxWidth; $element[0].style.maxWidth = ''; @@ -508,7 +506,7 @@ export class ResizingController extends modules.ViewController { const borderWidth = gridCoreUtils.getComponentBorderWidth(this, $rowsViewElement); that._maxWidth = totalWidth + scrollbarWidth + borderWidth; - // @ts-expect-error + $element.css('maxWidth', that._maxWidth); } } @@ -603,7 +601,6 @@ export class ResizingController extends modules.ViewController { } private _getGroupElement() { - // @ts-expect-error return this.component.$element().children().get(0); } @@ -704,15 +701,15 @@ export class ResizingController extends modules.ViewController { private _resetGroupElementHeight() { const groupElement = this._getGroupElement(); const scrollable = this._rowsView.getScrollable(); - + // @ts-expect-error if (groupElement && groupElement.style.height && (!scrollable || !scrollable.scrollTop())) { + // @ts-expect-error groupElement.style.height = ''; } } private _checkSize(checkSize?) { const $rootElement = this.component.$element(); - // @ts-expect-error const isWidgetVisible = $rootElement.is(':visible'); const isGridSizeChanged = this._lastWidth !== getWidth($rootElement) || this._lastHeight !== getHeight($rootElement) @@ -779,6 +776,7 @@ export class ResizingController extends modules.ViewController { // eslint-disable-next-line radix const maxHeight = parseInt($rootElement.css('maxHeight')); const maxHeightHappened = maxHeight && rootElementHeight >= maxHeight; + // @ts-expect-error const isMaxHeightApplied = groupElement && groupElement.scrollHeight === groupElement.offsetHeight; that.updateSize($rootElement); diff --git a/packages/devextreme/js/__internal/scheduler/appointments/m_appointment.ts b/packages/devextreme/js/__internal/scheduler/appointments/m_appointment.ts index b560186f4d6a..dc41d352a127 100644 --- a/packages/devextreme/js/__internal/scheduler/appointments/m_appointment.ts +++ b/packages/devextreme/js/__internal/scheduler/appointments/m_appointment.ts @@ -188,7 +188,7 @@ export class Appointment extends DOMComponent { return messageLocalization.format('dxScheduler-appointmentAriaLabel-group', groupText); } - _getDateText() { + _getDateText(): string { const startDateText = this._localizeDate(this._getStartDate()); const endDateText = this._localizeDate(this._getEndDate()); @@ -203,8 +203,7 @@ export class Appointment extends DOMComponent { return `${dateText}${partText}`; } - _renderAriaLabel() { - // @ts-expect-error + _renderAriaLabel(): void { const $element: dxElementWrapper = this.$element(); const ariaLabel = [ this._getDateText(), @@ -220,7 +219,7 @@ export class Appointment extends DOMComponent { $element.find('.dx-item-content').attr('id', id); } - _renderAppointmentGeometry() { + _renderAppointmentGeometry(): void { const geometry: any = this.option('geometry'); const $element: any = this.$element(); move($element, { diff --git a/packages/devextreme/js/__internal/scheduler/header/m_calendar.ts b/packages/devextreme/js/__internal/scheduler/header/m_calendar.ts index 36664500a35d..eaf76198bbe8 100644 --- a/packages/devextreme/js/__internal/scheduler/header/m_calendar.ts +++ b/packages/devextreme/js/__internal/scheduler/header/m_calendar.ts @@ -27,24 +27,23 @@ export default class SchedulerCalendar extends Widget { this._overlay.hide(); } - _keyboardHandler(opts) { + _keyboardHandler(opts): void { this._calendar?._keyboardHandler(opts); } - _init() { + _init(): void { // @ts-expect-error super._init(); this.$element(); } - _render() { + _render(): void { // @ts-expect-error super._render(); this._renderOverlay(); } - _renderOverlay() { - // @ts-expect-error + _renderOverlay(): void { this.$element().addClass(CALENDAR_POPOVER_CLASS); const isMobileLayout = this._isMobileLayout(); diff --git a/packages/devextreme/js/__internal/scheduler/header/m_header.ts b/packages/devextreme/js/__internal/scheduler/header/m_header.ts index 8aab9c09758a..b4046f4b018a 100644 --- a/packages/devextreme/js/__internal/scheduler/header/m_header.ts +++ b/packages/devextreme/js/__internal/scheduler/header/m_header.ts @@ -117,7 +117,7 @@ export class SchedulerHeader extends Widget { // @ts-expect-error super._init(); this._createEventMap(); - // @ts-expect-error + this.$element().addClass(COMPONENT_CLASS); this.currentView = viewsUtils.getCurrentView( diff --git a/packages/devextreme/js/__internal/scheduler/workspaces/m_work_space.ts b/packages/devextreme/js/__internal/scheduler/workspaces/m_work_space.ts index 61c249d1a754..18e8d1868941 100644 --- a/packages/devextreme/js/__internal/scheduler/workspaces/m_work_space.ts +++ b/packages/devextreme/js/__internal/scheduler/workspaces/m_work_space.ts @@ -2612,11 +2612,10 @@ class SchedulerWorkSpace extends WidgetObserver { this._appendHeaderPanelEmptyCellIfNecessary(); this._$headerPanelContainer.append(this._$headerTablesContainer); - this.$element().append( - this._$fixedContainer, - this._$headerPanelContainer, - this._dateTableScrollable.$element(), - ); + this.$element() + .append(this._$fixedContainer) + .append(this._$headerPanelContainer) + .append(this._dateTableScrollable.$element()); } _createWorkSpaceScrollableElements() { diff --git a/packages/devextreme/js/__internal/ui/calendar/m_calendar.navigator.ts b/packages/devextreme/js/__internal/ui/calendar/m_calendar.navigator.ts index 211e9d62b9d6..b37e6e39c3ff 100644 --- a/packages/devextreme/js/__internal/ui/calendar/m_calendar.navigator.ts +++ b/packages/devextreme/js/__internal/ui/calendar/m_calendar.navigator.ts @@ -1,10 +1,10 @@ +import type { DefaultOptionsRule } from '@js/core/options/utils'; import $ from '@js/core/renderer'; import type { ButtonStyle, ButtonType, ClickEvent } from '@js/ui/button'; import Button from '@js/ui/button'; import { isFluent, isMaterial } from '@js/ui/themes'; import type { WidgetOptions } from '@js/ui/widget/ui.widget'; - -import Widget from '../widget'; +import Widget from '@ts/core/widget/widget'; const CALENDAR_NAVIGATOR_CLASS = 'dx-calendar-navigator'; const CALENDAR_NAVIGATOR_PREVIOUS_MONTH_CLASS = 'dx-calendar-navigator-previous-month'; @@ -24,9 +24,9 @@ export interface NavigatorOptions extends WidgetOptions { } class Navigator extends Widget { - _clickAction?: any; + _clickAction?: ((event: { direction: number; event: ClickEvent }) => void) | null; - _captionClickAction?: any; + _captionClickAction?: ((event: { event: ClickEvent }) => void) | null; _prevButton!: Button; @@ -45,7 +45,7 @@ class Navigator extends Widget { }; } - _defaultOptionsRules(): Record[] { + _defaultOptionsRules(): DefaultOptionsRule[] { return super._defaultOptionsRules().concat([ { device() { @@ -103,10 +103,9 @@ class Navigator extends Widget { { focusStateEnabled, icon: rtlEnabled ? 'chevronright' : 'chevronleft', - onClick: (e) => { this._clickAction({ direction: -direction, event: e }); }, + onClick: (e) => { this._clickAction?.({ direction: -direction, event: e }); }, type, stylingMode, - // @ts-expect-error integrationOptions: {}, }, ); @@ -121,10 +120,9 @@ class Navigator extends Widget { { focusStateEnabled, icon: rtlEnabled ? 'chevronleft' : 'chevronright', - onClick: (e) => { this._clickAction({ direction, event: e }); }, + onClick: (e) => { this._clickAction?.({ direction, event: e }); }, type, stylingMode, - // @ts-expect-error integrationOptions: {}, }, ); @@ -138,7 +136,7 @@ class Navigator extends Widget { Button, { focusStateEnabled, - onClick: (e) => { this._captionClickAction({ event: e }); }, + onClick: (e) => { this._captionClickAction?.({ event: e }); }, type, stylingMode, template: (_, content) => { @@ -152,19 +150,22 @@ class Navigator extends Widget { .append($('').addClass(BUTTON_TEXT_CLASS).text(captionText)); }); }, - // @ts-expect-error integrationOptions: {}, }, ); const $caption = this._caption.$element(); - // @ts-expect-error - this.$element().append($prevButton, $caption, $nextButton); + this.$element() + .append($prevButton) + .append($caption) + .append($nextButton); } _renderCaption(): void { - this._caption?.option('text', this.option('text')); + const { text } = this.option(); + + this._caption?.option('text', text); } toggleButton( diff --git a/packages/devextreme/js/__internal/ui/collection/base.ts b/packages/devextreme/js/__internal/ui/collection/base.ts index 9928a0d14007..02245618afc4 100644 --- a/packages/devextreme/js/__internal/ui/collection/base.ts +++ b/packages/devextreme/js/__internal/ui/collection/base.ts @@ -2,8 +2,7 @@ import type { DataSource } from '@js/common/data'; import type { dxElementWrapper } from '@js/core/renderer'; import type { CollectionWidgetOptions, ItemLike } from '@js/ui/collection/ui.collection_widget.base'; import CollectionWidget from '@js/ui/collection/ui.collection_widget.base'; - -import Widget from '../widget'; +import Widget from '@ts/core/widget/widget'; export interface TypedCollectionWidgetOptions< // eslint-disable-next-line @typescript-eslint/no-explicit-any diff --git a/packages/devextreme/js/__internal/ui/context_menu/m_context_menu.ts b/packages/devextreme/js/__internal/ui/context_menu/m_context_menu.ts index e05648df2371..7c56b85e05b6 100644 --- a/packages/devextreme/js/__internal/ui/context_menu/m_context_menu.ts +++ b/packages/devextreme/js/__internal/ui/context_menu/m_context_menu.ts @@ -131,6 +131,7 @@ class ContextMenu extends MenuBase { return super._defaultOptionsRules().concat([{ device: () => !hasWindow(), options: { + // @ts-expect-error animation: null, }, }]); @@ -143,7 +144,7 @@ class ContextMenu extends MenuBase { }); } - _initActions() { + _initActions(): void { this._actions = {}; each(ACTIONS, (index, action) => { @@ -348,7 +349,6 @@ class ContextMenu extends MenuBase { _initMarkup(): void { this.$element() - // @ts-expect-error .addClass(DX_HAS_CONTEXT_MENU_CLASS); super._initMarkup(); @@ -356,6 +356,7 @@ class ContextMenu extends MenuBase { _render(): void { super._render(); + // @ts-expect-error this._renderVisibility(this.option('visible')); this._addWidgetClass(); } @@ -386,6 +387,7 @@ class ContextMenu extends MenuBase { } _attachKeyboardEvents(): void { + // @ts-expect-error !this._keyboardListenerId && this._focusTarget().length && super._attachKeyboardEvents(); } @@ -464,7 +466,6 @@ class ContextMenu extends MenuBase { } const eventName = addNamespace(showEvent, this.NAME); - // @ts-expect-error let contextMenuAction = this._createAction((e) => { // @ts-expect-error const delay = this.getShowDelay(this.option('showEvent')); @@ -480,7 +481,7 @@ class ContextMenu extends MenuBase { const handler = (e) => contextMenuAction({ event: e, target: $(e.currentTarget) }); // @ts-expect-error contextMenuAction = this._createAction(contextMenuAction); - + // @ts-expect-error if (isRenderer(target) || target.nodeType || isWindow(target)) { this._showContextMenuEventHandler = undefined; eventsEngine.on(target, eventName, handler); @@ -571,7 +572,7 @@ class ContextMenu extends MenuBase { onHidden: this._overlayHiddenActionHandler.bind(this), visualContainer: window, }; - + // @ts-expect-error return overlayOptions; } @@ -614,7 +615,7 @@ class ContextMenu extends MenuBase { const $activeItemContainer = this._getActiveItemsContainer(e.target); const $itemContainers = this._getItemsContainers(); const $clickedItem = this._searchActiveItem(e.target); - // @ts-expect-error + const $rootItem = this.$element().parents(`.${DX_MENU_ITEM_CLASS}`); const isRootItemClicked = $clickedItem[0] === $rootItem[0] && $clickedItem.length && $rootItem.length; const isInnerOverlayClicked = this._isIncludeOverlay($activeItemContainer, $itemContainers) && $clickedItem.length; @@ -803,7 +804,6 @@ class ContextMenu extends MenuBase { if (animation) { if (isPlainObject(animation.to)) { - // @ts-expect-error animation.to.position = submenuPosition; } this._animate($submenu, animation); @@ -1006,6 +1006,7 @@ class ContextMenu extends MenuBase { this._overlay.$content().addClass(this._widgetClass()); this._renderFocusState(); this._attachHoverEvents(); + // @ts-expect-error this._attachClickEvent(); this._renderItems(this._dataAdapter.getRootNodes()); } @@ -1147,7 +1148,6 @@ class ContextMenu extends MenuBase { } } -// @ts-expect-error registerComponent('dxContextMenu', ContextMenu); export default ContextMenu; diff --git a/packages/devextreme/js/__internal/ui/context_menu/m_menu_base.ts b/packages/devextreme/js/__internal/ui/context_menu/m_menu_base.ts index 7ed3c54fbca2..e952c338c7fa 100644 --- a/packages/devextreme/js/__internal/ui/context_menu/m_menu_base.ts +++ b/packages/devextreme/js/__internal/ui/context_menu/m_menu_base.ts @@ -43,8 +43,6 @@ class MenuBase extends HierarchicalCollectionWidget { _editStrategy?: MenuBaseEditStrategy; - _activeStateUnit?: string; - hasIcons?: boolean; _inkRipple?: { @@ -139,11 +137,14 @@ class MenuBase extends HierarchicalCollectionWidget { }); } - _isSelectionEnabled() { - return this.option('selectionMode') === SINGLE_SELECTION_MODE; + _isSelectionEnabled(): boolean { + const { selectionMode } = this.option(); + + return selectionMode === SINGLE_SELECTION_MODE; } - _init() { + _init(): void { + // @ts-expect-error this._activeStateUnit = `.${ITEM_CLASS}`; super._init(); this._renderSelectedItem(); @@ -285,7 +286,7 @@ class MenuBase extends HierarchicalCollectionWidget { _getShowSubmenuMode() { const defaultValue = 'onClick'; let optionValue = this.option('showSubmenuMode'); - + // @ts-expect-error optionValue = isObject(optionValue) ? optionValue.name : optionValue; return this._isDesktopDevice() ? optionValue : defaultValue; @@ -318,7 +319,7 @@ class MenuBase extends HierarchicalCollectionWidget { if (!$itemElement || this._isItemDisabled($itemElement)) return; e.stopPropagation(); - + // @ts-expect-error if (this._getShowSubmenuMode() === 'onHover') { clearTimeout(this._showSubmenusTimeout); this._showSubmenusTimeout = setTimeout(this._showSubmenu.bind(this, $itemElement), this._getSubmenuDelay('show')); @@ -557,6 +558,7 @@ class MenuBase extends HierarchicalCollectionWidget { const itemClickActionHandler = this._createAction(this._updateSubmenuVisibilityOnClick.bind(this)); this._itemDXEventHandler(e, 'onItemClick', {}, { beforeExecute: this._itemClick, + // @ts-expect-error afterExecute: itemClickActionHandler.bind(this), }); e._skipHandling = true; diff --git a/packages/devextreme/js/__internal/ui/date_range_box/m_date_range_box.ts b/packages/devextreme/js/__internal/ui/date_range_box/m_date_range_box.ts index a9a104d12dd4..81107f65c939 100644 --- a/packages/devextreme/js/__internal/ui/date_range_box/m_date_range_box.ts +++ b/packages/devextreme/js/__internal/ui/date_range_box/m_date_range_box.ts @@ -734,11 +734,11 @@ class DateRangeBox extends Editor { return this.element(); } - _focusClassTarget(): Element { + _focusClassTarget(): dxElementWrapper { return this.$element(); } - _toggleFocusClass(isFocused, $element): void { + _toggleFocusClass(isFocused, $element: dxElementWrapper): void { // @ts-expect-error super._toggleFocusClass(isFocused, this._focusClassTarget($element)); } diff --git a/packages/devextreme/js/__internal/ui/editor.ts b/packages/devextreme/js/__internal/ui/editor.ts index 99302a59f9a9..db90895c9ca3 100644 --- a/packages/devextreme/js/__internal/ui/editor.ts +++ b/packages/devextreme/js/__internal/ui/editor.ts @@ -1,16 +1,9 @@ import Editor from '@js/ui/editor/editor'; import type ValidationMessage from '@js/ui/validation_message'; +import type { Properties } from '@ts/core/widget/widget'; +import Widget from '@ts/core/widget/widget'; -import Widget from './widget'; - -// interface AriaOptions { -// role: string; -// // eslint-disable-next-line spellcheck/spell-checker -// roledescription: string; -// label: string; -// } - -declare class ExtendedEditor extends Widget { +declare class ExtendedEditor extends Widget { public _validationMessage?: ValidationMessage; _saveValueChangeEvent(e: unknown): void; diff --git a/packages/devextreme/js/__internal/ui/html_editor/ui/m_formDialog.ts b/packages/devextreme/js/__internal/ui/html_editor/ui/m_formDialog.ts index a0930e02d7de..128b2ac1b138 100644 --- a/packages/devextreme/js/__internal/ui/html_editor/ui/m_formDialog.ts +++ b/packages/devextreme/js/__internal/ui/html_editor/ui/m_formDialog.ts @@ -180,7 +180,6 @@ class FormDialog { const label = text ?? this.popupOption('title'); this._form ?.$element() - // @ts-expect-error .attr('aria-label', label); } diff --git a/packages/devextreme/js/__internal/ui/m_defer_rendering.ts b/packages/devextreme/js/__internal/ui/m_defer_rendering.ts index 75ac61edb085..1ab0ad214498 100644 --- a/packages/devextreme/js/__internal/ui/m_defer_rendering.ts +++ b/packages/devextreme/js/__internal/ui/m_defer_rendering.ts @@ -218,7 +218,6 @@ const DeferRendering = Widget.inherit({ // @ts-expect-error this._$loadIndicator = new LoadIndicator($('
'), { visible: true }) .$element() - // @ts-expect-error .addClass(DEFER_DEFER_RENDERING_LOAD_INDICATOR); $('
') diff --git a/packages/devextreme/js/__internal/ui/m_file_uploader.ts b/packages/devextreme/js/__internal/ui/m_file_uploader.ts index 9a18fdc2d69c..8510322d9d00 100644 --- a/packages/devextreme/js/__internal/ui/m_file_uploader.ts +++ b/packages/devextreme/js/__internal/ui/m_file_uploader.ts @@ -206,6 +206,7 @@ class FileUploader extends Editor { } _defaultOptionsRules() { + // @ts-expect-error return super._defaultOptionsRules().concat([ { device: () => devices.real().deviceType === 'desktop' && !devices.isSimulator(), @@ -286,7 +287,6 @@ class FileUploader extends Editor { } _setUploadStrategy() { - // @ts-expect-error if (this.option('chunkSize') > 0) { const uploadChunk = this.option('uploadChunk'); this._uploadStrategy = uploadChunk && isFunction(uploadChunk) @@ -340,20 +340,21 @@ class FileUploader extends Editor { const fileName = this._$fileInput.val().replace(/^.*\\/, ''); const files = this._$fileInput.prop('files'); - + // @ts-expect-error if (files && !files.length && this.option('uploadMode') !== 'useForm') { return; } const value = files ? this._getFiles(files) : [{ name: fileName }]; this._changeValue(value); - + // @ts-expect-error if (this.option('uploadMode') === 'instantly') { this._uploadFiles(); } } _shouldFileListBeExtended() { + // @ts-expect-error return this.option('uploadMode') !== 'useForm' && this.option('extendSelection') && this.option('multiple'); } @@ -371,7 +372,6 @@ class FileUploader extends Editor { } _getFile(fileData) { - // @ts-expect-error const targetFileValue = isNumeric(fileData) ? this.option('value')[fileData] : fileData; return this._files.filter((file) => file.value === targetFileValue)[0]; } @@ -391,7 +391,6 @@ class FileUploader extends Editor { } _focusTarget() { - // @ts-expect-error return this.$element().find(`.${FILEUPLOADER_BUTTON_CLASS}`); } @@ -401,7 +400,6 @@ class FileUploader extends Editor { _initMarkup(): void { super._initMarkup(); - // @ts-expect-error this.$element().addClass(FILEUPLOADER_CLASS); this._renderWrapper(); @@ -444,6 +442,7 @@ class FileUploader extends Editor { } _getUploadAbortedStatusMessage() { + // @ts-expect-error return this.option('uploadMode') === 'instantly' ? this.option('uploadAbortedMessage') : this.option('readyToUploadMessage'); @@ -451,7 +450,7 @@ class FileUploader extends Editor { _createFiles(): void { const value = this.option('value'); - + // @ts-expect-error if (this._files && (value?.length === 0 || !this._shouldFileListBeExtended())) { this._preventFilesUploading(this._files); this._files = null; @@ -460,7 +459,7 @@ class FileUploader extends Editor { if (!this._files) { this._files = []; } - + // @ts-expect-error each(value?.slice(this._files.length), (_, value) => { const file = this._createFile(value); this._validateFile(file); @@ -483,15 +482,16 @@ class FileUploader extends Editor { const accept = this.option('accept'); const allowedTypes = this._getAllowedFileTypes(accept); const fileExtension = file.value.name.substring(file.value.name.lastIndexOf('.')).toLowerCase(); + // @ts-expect-error if (accept?.length !== 0 && !this._isFileTypeAllowed(file.value, allowedTypes)) { return false; } + // @ts-expect-error if (allowedExtensions?.length === 0) { return true; } // @ts-expect-error for (let i = 0; i < allowedExtensions.length; i++) { - // @ts-expect-error if (fileExtension === allowedExtensions[i].toLowerCase()) { return true; } @@ -502,14 +502,14 @@ class FileUploader extends Editor { _validateMaxFileSize(file): boolean { const fileSize = file.value.size; const maxFileSize = this.option('maxFileSize'); - // @ts-expect-error + return maxFileSize > 0 ? fileSize <= maxFileSize : true; } _validateMinFileSize(file): boolean { const fileSize = file.value.size; const minFileSize = this.option('minFileSize'); - // @ts-expect-error + return minFileSize > 0 ? fileSize >= minFileSize : true; } @@ -585,6 +585,7 @@ class FileUploader extends Editor { .addClass(FILEUPLOADER_FILES_CONTAINER_CLASS) // @ts-expect-error .appendTo(this._$content); + // @ts-expect-error } else if (!this._shouldFileListBeExtended() || value?.length === 0) { this._$filesContainer.empty(); } @@ -655,11 +656,14 @@ class FileUploader extends Editor { } _createValidationElement(key) { + // @ts-expect-error return $('').text(this.option(key)); } _updateFileNameMaxWidth() { + // @ts-expect-error const cancelButtonsCount = this.option('allowCanceling') && this.option('uploadMode') !== 'useForm' ? 1 : 0; + // @ts-expect-error const uploadButtonsCount = this.option('uploadMode') === 'useButtons' ? 1 : 0; const filesContainerWidth = getWidth( this._$filesContainer.find(`.${FILEUPLOADER_FILE_CONTAINER_CLASS}`).first(), @@ -685,6 +689,7 @@ class FileUploader extends Editor { } _getCancelButton(file) { + // @ts-expect-error if (this.option('uploadMode') === 'useForm') { return null; } @@ -705,7 +710,6 @@ class FileUploader extends Editor { icon: 'close', visible: allowCanceling, disabled: readOnly, - // @ts-expect-error integrationOptions: {}, hoverStateEnabled, stylingMode: _buttonStylingMode, @@ -718,6 +722,7 @@ class FileUploader extends Editor { } _getUploadButton(file) { + // @ts-expect-error if (!file.isValid() || this.option('uploadMode') !== 'useButtons') { return null; } @@ -768,6 +773,7 @@ class FileUploader extends Editor { } removeFile(fileData) { + // @ts-expect-error if (this.option('uploadMode') === 'useForm' || !isDefined(fileData)) { return; } @@ -781,7 +787,6 @@ class FileUploader extends Editor { } _toggleFileUploaderEmptyClassName(): void { - // @ts-expect-error this.$element().toggleClass(FILEUPLOADER_EMPTY_CLASS, !this._files.length || this._hasInvalidFile(this._files)); } @@ -820,7 +825,6 @@ class FileUploader extends Editor { this._selectButton = this._createComponent($button, Button, { text: this.option('selectButtonText'), focusStateEnabled: false, - // @ts-expect-error integrationOptions: {}, disabled: this.option('readOnly'), hoverStateEnabled: this.option('hoverStateEnabled'), @@ -868,6 +872,7 @@ class FileUploader extends Editor { } _renderUploadButton() { + // @ts-expect-error if (this.option('uploadMode') !== 'useButtons') { return; } @@ -882,7 +887,6 @@ class FileUploader extends Editor { text: this.option('uploadButtonText'), onClick: this._uploadButtonClickHandler.bind(this), type: this.option('_uploadButtonType'), - // @ts-expect-error integrationOptions: {}, hoverStateEnabled: this.option('hoverStateEnabled'), }); @@ -893,6 +897,7 @@ class FileUploader extends Editor { } _shouldDragOverBeRendered() { + // @ts-expect-error return !this.option('readOnly') && (this.option('uploadMode') !== 'useForm' || this.option('nativeDropSupported')); } @@ -977,6 +982,7 @@ class FileUploader extends Editor { } _useInputForDrop() { + // @ts-expect-error return this.option('nativeDropSupported') && this.option('uploadMode') === 'useForm'; } @@ -1060,7 +1066,6 @@ class FileUploader extends Editor { this._activeDropZone = null; if (!isCustomTarget) { - // @ts-expect-error this.$element().removeClass(FILEUPLOADER_DRAGOVER_CLASS); } @@ -1078,7 +1083,7 @@ class FileUploader extends Editor { } this._changeValue(files); - + // @ts-expect-error if (this.option('uploadMode') === 'instantly') { this._uploadFiles(); } @@ -1156,6 +1161,7 @@ class FileUploader extends Editor { } abortUpload(fileData) { + // @ts-expect-error if (this.option('uploadMode') === 'useForm') { return; } @@ -1170,6 +1176,7 @@ class FileUploader extends Editor { } upload(fileData) { + // @ts-expect-error if (this.option('uploadMode') === 'useForm') { return; } @@ -1259,7 +1266,6 @@ class FileUploader extends Editor { max: fileSize, statusFormat: (ratio) => `${this._getProgressValue(ratio)}%`, showStatus: false, - // @ts-expect-error statusPosition: 'right', }); } @@ -1351,6 +1357,7 @@ class FileUploader extends Editor { _updateReadOnlyState() { const readOnly = this.option('readOnly'); + // @ts-expect-error this._selectButton.option('disabled', readOnly); this._files.forEach((file) => file.cancelButton?.option('disabled', readOnly)); this._updateInputLabelText(); @@ -1359,7 +1366,9 @@ class FileUploader extends Editor { _updateHoverState() { const value = this.option('hoverStateEnabled'); + // @ts-expect-error this._selectButton?.option('hoverStateEnabled', value); + // @ts-expect-error this._uploadButton?.option('hoverStateEnabled', value); this._files.forEach((file) => { file.uploadButton?.option('hoverStateEnabled', value); @@ -1523,6 +1532,7 @@ class FileUploader extends Editor { } _resetInputValue(force?: boolean) { + // @ts-expect-error if (this.option('uploadMode') === 'useForm' && !force) { return; } @@ -2024,7 +2034,7 @@ class CustomWholeFileUploadStrategy extends WholeFileUploadStrategyBase { return true; } } -// @ts-expect-error + registerComponent('dxFileUploader', FileUploader); export default FileUploader; diff --git a/packages/devextreme/js/__internal/ui/m_validation_group.ts b/packages/devextreme/js/__internal/ui/m_validation_group.ts index 5f6fa9f85127..af515e0750a0 100644 --- a/packages/devextreme/js/__internal/ui/m_validation_group.ts +++ b/packages/devextreme/js/__internal/ui/m_validation_group.ts @@ -24,7 +24,7 @@ class ValidationGroup extends DOMComponent { _initMarkup() { const $element = this.$element(); - // @ts-expect-error + $element.addClass(VALIDATION_ENGINE_CLASS); // @ts-expect-error $element.find(`.${VALIDATOR_CLASS}`).each((_, validatorContainer) => { @@ -48,7 +48,6 @@ class ValidationGroup extends DOMComponent { _dispose() { ValidationEngine.removeGroup(this); - // @ts-expect-error this.$element().removeClass(VALIDATION_ENGINE_CLASS); // @ts-expect-error super._dispose(); diff --git a/packages/devextreme/js/__internal/ui/menu/m_menu.ts b/packages/devextreme/js/__internal/ui/menu/m_menu.ts index 8fb0b99009a9..f5b418ffbceb 100644 --- a/packages/devextreme/js/__internal/ui/menu/m_menu.ts +++ b/packages/devextreme/js/__internal/ui/menu/m_menu.ts @@ -136,11 +136,11 @@ class Menu extends MenuBase { } _focusTarget(): dxElementWrapper { - // @ts-expect-error return this.$element(); } - _isMenuHorizontal() { + _isMenuHorizontal(): boolean { + // @ts-expect-error return this.option('orientation') === 'horizontal'; } @@ -232,12 +232,12 @@ class Menu extends MenuBase { } } - _isAdaptivityEnabled() { + _isAdaptivityEnabled(): boolean { + // @ts-expect-error return this.option('adaptivityEnabled') && this.option('orientation') === 'horizontal'; } _updateItemsWidthCache(): void { - // @ts-expect-error const $menuItems = this.$element().find('ul').first().children('li') .children(`.${DX_MENU_ITEM_CLASS}`); this._menuItemsWidth = this._getSummaryItemsSize('width', $menuItems, true); @@ -268,11 +268,10 @@ class Menu extends MenuBase { _initMarkup(): void { // @ts-expect-error this._visibleSubmenu = null; - // @ts-expect-error + this.$element().addClass(DX_MENU_CLASS); super._initMarkup(); - // @ts-expect-error this._addCustomCssClass(this.$element()); this.setAria('role', 'menubar'); @@ -311,7 +310,7 @@ class Menu extends MenuBase { super._focusOutHandler(e); } - _renderHamburgerButton(): Element { + _renderHamburgerButton(): dxElementWrapper { // @ts-expect-error this._hamburger = new Button($('
').addClass(DX_ADAPTIVE_HAMBURGER_BUTTON_CLASS), { icon: 'menu', @@ -334,14 +333,11 @@ class Menu extends MenuBase { } _toggleHamburgerActiveState(state) { - // @ts-expect-error this._hamburger && this._hamburger.$element().toggleClass(DX_STATE_ACTIVE_CLASS, state); } - _toggleAdaptiveMode(state) { - // @ts-expect-error + _toggleAdaptiveMode(state: boolean): void { const $menuItemsContainer = this.$element().find(`.${DX_MENU_HORIZONTAL_CLASS}`); - // @ts-expect-error const $adaptiveElements = this.$element().find(`.${DX_ADAPTIVE_MODE_CLASS}`); if (state) { @@ -352,8 +348,9 @@ class Menu extends MenuBase { } this._setAriaRole(state); - + // @ts-expect-error $menuItemsContainer.toggle(!state); + // @ts-expect-error $adaptiveElements.toggle(state); } @@ -387,7 +384,6 @@ class Menu extends MenuBase { return { _ignoreFunctionValueDeprecation: true, - // @ts-expect-error maxHeight: () => getElementMaxHeightByWindow(this.$element()), deferRendering: false, shading: false, @@ -471,7 +467,6 @@ class Menu extends MenuBase { this._$adaptiveContainer.append($hamburger); this._$adaptiveContainer.append(this._overlay.$element()); - // @ts-expect-error this.$element().append(this._$adaptiveContainer); this._updateItemsWidthCache(); @@ -634,7 +629,6 @@ class Menu extends MenuBase { } _clearRootSelection(): void { - // @ts-expect-error const $prevSelectedItem = this.$element().find(`.${DX_MENU_ITEMS_CONTAINER_CLASS}`).first().children() .children() .filter(`.${this._selectedItemClass()}`); @@ -771,7 +765,6 @@ class Menu extends MenuBase { const $submenu = $rootItem.children(`.${DX_CONTEXT_MENU_CLASS}`); - // @ts-expect-error return $submenu.length && Submenu.getInstance($submenu); } @@ -974,6 +967,7 @@ class Menu extends MenuBase { if (this._visibleSubmenu) { if (this._visibleSubmenu === currentSubmenu) { + // @ts-expect-error if (this.option('showFirstSubmenuMode') === 'onClick') this._hideSubmenu(this._visibleSubmenu); return; } @@ -1049,7 +1043,6 @@ class Menu extends MenuBase { } } -// @ts-expect-error registerComponent('dxMenu', Menu); export default Menu; diff --git a/packages/devextreme/js/__internal/ui/menu/m_submenu.ts b/packages/devextreme/js/__internal/ui/menu/m_submenu.ts index 96aaa27e3f9a..d38d214802fb 100644 --- a/packages/devextreme/js/__internal/ui/menu/m_submenu.ts +++ b/packages/devextreme/js/__internal/ui/menu/m_submenu.ts @@ -32,14 +32,14 @@ class Submenu extends ContextMenu { }); } - _initDataAdapter() { + _initDataAdapter(): void { this._dataAdapter = this.option('_dataAdapter'); if (!this._dataAdapter) { super._initDataAdapter(); } } - _renderContentImpl() { + _renderContentImpl(): void { this._renderContextMenuOverlay(); super._renderContentImpl(); @@ -48,7 +48,7 @@ class Submenu extends ContextMenu { this._renderDelimiter(); } - _renderDelimiter() { + _renderDelimiter(): void { this.$contentDelimiter = $('
') .appendTo(this._itemContainer()) .addClass(DX_CONTEXT_MENU_CONTENT_DELIMITER_CLASS); @@ -73,6 +73,7 @@ class Submenu extends ContextMenu { } _isMenuHorizontal(): boolean { + // @ts-expect-error return this.option('orientation') === 'horizontal'; } diff --git a/packages/devextreme/js/__internal/ui/radio_group/m_radio_group.ts b/packages/devextreme/js/__internal/ui/radio_group/m_radio_group.ts index 6cd1187c3561..10aaa8fde937 100644 --- a/packages/devextreme/js/__internal/ui/radio_group/m_radio_group.ts +++ b/packages/devextreme/js/__internal/ui/radio_group/m_radio_group.ts @@ -1,5 +1,6 @@ import registerComponent from '@js/core/component_registrator'; import devices from '@js/core/devices'; +import type { DefaultOptionsRule } from '@js/core/options/utils'; import type { dxElementWrapper } from '@js/core/renderer'; import $ from '@js/core/renderer'; import type { DeferredObj } from '@js/core/utils/deferred'; @@ -30,7 +31,7 @@ class RadioGroup extends Editor { return { paginate: false }; } - _defaultOptionsRules() { + _defaultOptionsRules(): DefaultOptionsRule[] { const defaultOptionsRules = super._defaultOptionsRules(); return defaultOptionsRules.concat([{ @@ -46,6 +47,7 @@ class RadioGroup extends Editor { }]); } + // @ts-expect-error _fireContentReadyAction(force: boolean): void { force && super._fireContentReadyAction(); } @@ -111,6 +113,7 @@ class RadioGroup extends Editor { } _getSelectedItemKeys(value = this.option('value')) { + // @ts-expect-error const isNullSelectable = this.option('valueExpr') !== 'this'; const shouldSelectValue = isNullSelectable && value === null || isDefined(value); @@ -178,7 +181,7 @@ class RadioGroup extends Editor { } _renderLayout(): void { - const layout = this.option('layout'); + const { layout } = this.option(); const $element = $(this.element()); $element.toggleClass(RADIO_GROUP_VERTICAL_CLASS, layout === 'vertical'); @@ -195,7 +198,6 @@ class RadioGroup extends Editor { itemTemplate, tabIndex, } = this.option(); - this._createComponent($radios, RadioCollection, { onInitialized: ({ component }) => { this._radios = component; @@ -239,7 +241,7 @@ class RadioGroup extends Editor { _setSubmitValue(value?: unknown): void { value = value ?? this.option('value'); - + // @ts-expect-error const submitValue = this.option('valueExpr') === 'this' // @ts-expect-error ? this._displayGetter(value) @@ -250,12 +252,15 @@ class RadioGroup extends Editor { // eslint-disable-next-line @typescript-eslint/no-unused-vars _setCollectionWidgetOption(name: string, value: unknown): void { + // @ts-expect-error // eslint-disable-next-line @typescript-eslint/no-floating-promises this._areRadiosCreated.done(this._setWidgetOption.bind(this, '_radios', arguments)); } _updateItemsSize(): void { - if (this.option('layout') === 'horizontal') { + const { layout } = this.option(); + + if (layout === 'horizontal') { this.itemElements()?.css('height', 'auto'); } else { // @ts-expect-error @@ -276,7 +281,6 @@ class RadioGroup extends Editor { // @ts-expect-error RadioGroup.include(DataExpressionMixin); -// @ts-expect-error registerComponent('dxRadioGroup', RadioGroup); export default RadioGroup; diff --git a/packages/devextreme/js/__internal/ui/speed_dial_action/m_speed_dial_action.ts b/packages/devextreme/js/__internal/ui/speed_dial_action/m_speed_dial_action.ts index 94c93400d8ac..49a24a4e5a30 100644 --- a/packages/devextreme/js/__internal/ui/speed_dial_action/m_speed_dial_action.ts +++ b/packages/devextreme/js/__internal/ui/speed_dial_action/m_speed_dial_action.ts @@ -4,7 +4,7 @@ import { extend } from '@js/core/utils/extend'; import readyCallbacks from '@js/core/utils/ready_callbacks'; import type { Properties } from '@js/ui/speed_dial_action'; import swatchContainer from '@js/ui/widget/swatch_container'; -import Widget from '@ts/ui/widget'; +import Widget from '@ts/core/widget/widget'; import { disposeAction, initAction } from './m_speed_dial_main_item'; @@ -84,13 +84,11 @@ class SpeedDialAction extends Widget { } _dispose() { - // @ts-expect-error disposeAction(this._options.silent('id')); super._dispose(); } } -// @ts-expect-error registerComponent('dxSpeedDialAction', SpeedDialAction); export default SpeedDialAction; diff --git a/packages/devextreme/js/__internal/ui/speed_dial_action/m_speed_dial_item.ts b/packages/devextreme/js/__internal/ui/speed_dial_action/m_speed_dial_item.ts index 3a8b7dd7bbea..3a60b05d0fc3 100644 --- a/packages/devextreme/js/__internal/ui/speed_dial_action/m_speed_dial_item.ts +++ b/packages/devextreme/js/__internal/ui/speed_dial_action/m_speed_dial_item.ts @@ -79,7 +79,6 @@ class SpeedDialItem extends Overlay { } _render(): void { - // @ts-expect-error this.$element().addClass(FAB_CLASS); this._renderIcon(); this._renderLabel(); @@ -193,7 +192,6 @@ class SpeedDialItem extends Overlay { _setClickAction(): void { const eventName = addNamespace(clickEventName, this.NAME); - // @ts-expect-error const overlayContent = this.$element().find(OVERLAY_CONTENT_SELECTOR); eventsEngine.off(overlayContent, eventName); diff --git a/packages/devextreme/js/__internal/ui/speed_dial_action/m_speed_dial_main_item.ts b/packages/devextreme/js/__internal/ui/speed_dial_action/m_speed_dial_main_item.ts index 0dda420c847e..732bbf107497 100644 --- a/packages/devextreme/js/__internal/ui/speed_dial_action/m_speed_dial_main_item.ts +++ b/packages/devextreme/js/__internal/ui/speed_dial_action/m_speed_dial_main_item.ts @@ -167,7 +167,6 @@ class SpeedDialMainItem extends SpeedDialItem { } _render() { - // @ts-expect-error this.$element().addClass(FAB_MAIN_CLASS); super._render(); this._moveToContainer(); @@ -177,13 +176,11 @@ class SpeedDialMainItem extends SpeedDialItem { _renderLabel() { super._renderLabel(); - // @ts-expect-error this.$element().toggleClass(FAB_MAIN_CLASS_WITH_LABEL, !!this._$label); } _renderIcon() { super._renderIcon(); - // @ts-expect-error this.$element().toggleClass(FAB_MAIN_CLASS_WITHOUT_ICON, !this.option('icon')); } diff --git a/packages/devextreme/js/__internal/ui/splitter/splitter.ts b/packages/devextreme/js/__internal/ui/splitter/splitter.ts index 25feb83b1dbc..de6c761beb85 100644 --- a/packages/devextreme/js/__internal/ui/splitter/splitter.ts +++ b/packages/devextreme/js/__internal/ui/splitter/splitter.ts @@ -169,6 +169,7 @@ class Splitter extends CollectionWidget { } _initializeRenderQueue(): void { + // @ts-expect-error this._renderQueue = this.option('_renderQueue') ?? []; } @@ -503,12 +504,14 @@ class Splitter extends CollectionWidget { return; } + const { orientation: currentOrientation } = this.option(); + const newLayout = getNextLayout( this._currentLayout ?? [], calculateDelta( // @ts-expect-error ts-error event.offset, - this.option('orientation'), + currentOrientation, rtlEnabled, this._currentOnePxRatio, ), @@ -626,7 +629,9 @@ class Splitter extends CollectionWidget { } _isHorizontalOrientation(): boolean { - return this.option('orientation') === ORIENTATION.horizontal; + const { orientation } = this.option(); + + return orientation === ORIENTATION.horizontal; } _toggleOrientationClass(): void { @@ -900,7 +905,6 @@ class Splitter extends CollectionWidget { _updateItemOption(path: string, value: unknown, silent = false): void { if (silent) { - // @ts-expect-error badly typed base class this._options.silent(path, value); } else { this.option(path, value); @@ -1001,7 +1005,6 @@ class Splitter extends CollectionWidget { } } -// @ts-expect-error ts-error registerComponent('dxSplitter', Splitter); export default Splitter; diff --git a/packages/devextreme/js/__internal/ui/splitter/splitter_item.ts b/packages/devextreme/js/__internal/ui/splitter/splitter_item.ts index 25e4eb9fa9f4..9b04d538c37f 100644 --- a/packages/devextreme/js/__internal/ui/splitter/splitter_item.ts +++ b/packages/devextreme/js/__internal/ui/splitter/splitter_item.ts @@ -36,7 +36,7 @@ class SplitterItem extends CollectionWidgetItem { this._setIdAttr(id); const config = this._owner._getResizeHandleConfig(id); - // @ts-expect-error + this._resizeHandle = this._owner._createComponent($('
'), ResizeHandle, config); if (this._resizeHandle && this._$element) { diff --git a/packages/devextreme/js/__internal/ui/toolbar/internal/m_toolbar.menu.ts b/packages/devextreme/js/__internal/ui/toolbar/internal/m_toolbar.menu.ts index 3400b81339d7..7fe13d198bc8 100644 --- a/packages/devextreme/js/__internal/ui/toolbar/internal/m_toolbar.menu.ts +++ b/packages/devextreme/js/__internal/ui/toolbar/internal/m_toolbar.menu.ts @@ -1,6 +1,7 @@ import '@js/ui/popup/ui.popup'; import devices from '@js/core/devices'; +import type { DefaultOptionsRule } from '@js/core/options/utils'; import type { dxElementWrapper } from '@js/core/renderer'; import $ from '@js/core/renderer'; import { ChildDefaultTemplate } from '@js/core/templates/child_default_template'; @@ -14,7 +15,7 @@ import type Popup from '@js/ui/popup'; import { isFluent, isMaterialBased } from '@js/ui/themes'; import type { Item } from '@js/ui/toolbar'; import type { WidgetOptions } from '@js/ui/widget/ui.widget'; -import Widget from '@ts/ui/widget'; +import Widget from '@ts/core/widget/widget'; import { toggleItemFocusableElementTabIndex } from '../m_toolbar.utils'; import ToolbarMenuList from './m_toolbar.menu.list'; @@ -30,7 +31,7 @@ const POPUP_VERTICAL_OFFSET = 3; export interface Properties extends WidgetOptions { opened?: boolean; - container?: string | Element | undefined; + container: string | Element | undefined; animation?: dxPopupAnimation; @@ -90,7 +91,7 @@ export default class DropDownMenu extends Widget { }; } - _defaultOptionsRules() { + _defaultOptionsRules(): DefaultOptionsRule[] { return super._defaultOptionsRules().concat([ { device() { @@ -106,6 +107,7 @@ export default class DropDownMenu extends Widget { return isMaterialBased(); }, options: { + // @ts-expect-error useInkRipple: true, animation: { show: { @@ -129,22 +131,21 @@ export default class DropDownMenu extends Widget { _init(): void { super._init(); - // @ts-expect-error this.$element().addClass(DROP_DOWN_MENU_CLASS); this._initItemClickAction(); this._initButtonClickAction(); } - _initItemClickAction() { - this._itemClickAction = this._createActionByOption('onItemClick'); + _initItemClickAction(): void { + this._itemClickAction = this._createActionByOption('onItemClick', {}); } - _initButtonClickAction() { - this._buttonClickAction = this._createActionByOption('onButtonClick'); + _initButtonClickAction(): void { + this._buttonClickAction = this._createActionByOption('onButtonClick', {}); } - _initTemplates() { + _initTemplates(): void { this._templateManager.addDefaultTemplates({ content: new ChildDefaultTemplate('content'), }); @@ -181,7 +182,6 @@ export default class DropDownMenu extends Widget { } _renderButton(): void { - // @ts-expect-error const $button = this.$element().addClass(DROP_DOWN_MENU_BUTTON_CLASS); this._button = this._createComponent($button, Button, { @@ -189,7 +189,6 @@ export default class DropDownMenu extends Widget { template: 'content', // @ts-expect-error stylingMode: isFluent() ? 'text' : 'contained', - // @ts-expect-error useInkRipple: this.option('useInkRipple'), hoverStateEnabled: false, focusStateEnabled: false, @@ -226,7 +225,6 @@ export default class DropDownMenu extends Widget { this._popup = this._createComponent(this._$popup, 'dxPopup', { onInitialized({ component }) { - // @ts-expect-error component.$wrapper() .addClass(DROP_DOWN_MENU_POPUP_WRAPPER_CLASS) .addClass(DROP_DOWN_MENU_POPUP_CLASS); @@ -237,12 +235,9 @@ export default class DropDownMenu extends Widget { _ignoreFunctionValueDeprecation: true, maxHeight: () => this._getMaxHeight(), position: { - // @ts-expect-error my: `top ${rtlEnabled ? 'left' : 'right'}`, - // @ts-expect-error at: `bottom ${rtlEnabled ? 'left' : 'right'}`, collision: 'fit flip', - // @ts-expect-error offset: { v: POPUP_VERTICAL_OFFSET }, of: this.$element(), }, diff --git a/packages/devextreme/js/__internal/ui/toolbar/m_toolbar.base.ts b/packages/devextreme/js/__internal/ui/toolbar/m_toolbar.base.ts index 77b2f91b7974..f6a25563734c 100644 --- a/packages/devextreme/js/__internal/ui/toolbar/m_toolbar.base.ts +++ b/packages/devextreme/js/__internal/ui/toolbar/m_toolbar.base.ts @@ -62,6 +62,7 @@ class ToolbarBase extends AsyncCollectionWidget { _waitParentAnimationTimeout?: any; + // @ts-expect-error _getSynchronizableOptionsForCreateComponent(): string[] { return super._getSynchronizableOptionsForCreateComponent().filter((item) => item !== 'disabled'); } @@ -109,7 +110,6 @@ class ToolbarBase extends AsyncCollectionWidget { this._getTemplate('dx-polymorph-widget').render({ container: $container, model: rawModel, - // @ts-expect-error parent: this, }); }, ['text', 'html', 'widget', 'options'], this.option('integrationOptions.watchMethod')); @@ -139,6 +139,7 @@ class ToolbarBase extends AsyncCollectionWidget { return isMaterialBased(); }, options: { + // @ts-expect-error useFlatButtons: true, }, }, @@ -190,7 +191,6 @@ class ToolbarBase extends AsyncCollectionWidget { _renderToolbar(): void { this.$element() - // @ts-expect-error .addClass(TOOLBAR_CLASS); this._$toolbarItemsContainer = $('
') @@ -386,12 +386,13 @@ class ToolbarBase extends AsyncCollectionWidget { } _getToolbarItems(): Item[] { + // @ts-expect-error return this.option('items') ?? []; } _renderContentImpl(): void { const items = this._getToolbarItems(); - // @ts-expect-error + this.$element().toggleClass(TOOLBAR_MINI_CLASS, items.length === 0); if (this._renderedItemsCount) { @@ -407,7 +408,7 @@ class ToolbarBase extends AsyncCollectionWidget { _clean(): void { this._$toolbarItemsContainer.children().empty(); - // @ts-expect-error + this.$element().empty(); delete this._$beforeSection; @@ -497,9 +498,9 @@ class ToolbarBase extends AsyncCollectionWidget { // eslint-disable-next-line @typescript-eslint/naming-convention const _checkWebFontForLabelsLoaded = () => { - // @ts-expect-error const $labels = this.$element().find(`.${TOOLBAR_LABEL_CLASS}`); const promises = []; + // @ts-expect-error $labels.each((_, label) => { const text = $(label).text(); // @ts-expect-error @@ -517,7 +518,7 @@ class ToolbarBase extends AsyncCollectionWidget { } } } -// @ts-expect-error + registerComponent('dxToolbarBase', ToolbarBase); export default ToolbarBase; diff --git a/packages/devextreme/js/__internal/ui/toolbar/m_toolbar.ts b/packages/devextreme/js/__internal/ui/toolbar/m_toolbar.ts index c805a92193a6..6a589495d60a 100644 --- a/packages/devextreme/js/__internal/ui/toolbar/m_toolbar.ts +++ b/packages/devextreme/js/__internal/ui/toolbar/m_toolbar.ts @@ -118,7 +118,6 @@ class Toolbar extends ToolbarBase { } _arrangeItems(): void { - // @ts-expect-error if (this.$element().is(':hidden')) { return; } @@ -186,7 +185,7 @@ class Toolbar extends ToolbarBase { this._dimensionChanged(); } } -// @ts-expect-error + registerComponent('dxToolbar', Toolbar); export default Toolbar; diff --git a/packages/devextreme/js/__internal/ui/toolbar/strategy/m_toolbar.singleline.ts b/packages/devextreme/js/__internal/ui/toolbar/strategy/m_toolbar.singleline.ts index c45b2d369548..3f6455738f20 100644 --- a/packages/devextreme/js/__internal/ui/toolbar/strategy/m_toolbar.singleline.ts +++ b/packages/devextreme/js/__internal/ui/toolbar/strategy/m_toolbar.singleline.ts @@ -10,9 +10,8 @@ import { extend } from '@js/core/utils/extend'; import { each } from '@js/core/utils/iterator'; import { getWidth } from '@js/core/utils/size'; import type { Item } from '@js/ui/toolbar'; - -import DropDownMenu from '../internal/m_toolbar.menu'; -import type Toolbar from '../m_toolbar'; +import DropDownMenu from '@ts/ui/toolbar/internal/m_toolbar.menu'; +import type Toolbar from '@ts/ui/toolbar/m_toolbar'; const INVISIBLE_STATE_CLASS = 'dx-state-invisible'; const TOOLBAR_DROP_DOWN_MENU_CONTAINER_CLASS = 'dx-toolbar-menu-container'; @@ -38,14 +37,14 @@ export class SingleLineStrategy { this._toolbar = toolbar; } - _initMarkup() { + _initMarkup(): void { deferRender(() => { this._renderOverflowMenu(); this._renderMenuItems(); }); } - _renderOverflowMenu() { + _renderOverflowMenu(): void { if (!this._hasVisibleMenuItems()) { return; } @@ -58,6 +57,7 @@ export class SingleLineStrategy { const menuItemTemplate = this._toolbar._getTemplateByOption('menuItemTemplate'); this._menu = this._toolbar._createComponent($menu, DropDownMenu, { + // @ts-expect-error disabled: this._toolbar.option('disabled'), itemTemplate: () => menuItemTemplate, onItemClick: (e) => { itemClickAction(e); }, @@ -199,8 +199,7 @@ export class SingleLineStrategy { return elementWidth; } - _hideOverflowItems(width?: number) { - // @ts-expect-error + _hideOverflowItems(width?: number): void { const overflowItems = this._toolbar.$element().find(`.${TOOLBAR_AUTO_HIDE_ITEM_CLASS}`); if (!overflowItems.length) { diff --git a/packages/devextreme/js/__internal/ui/widget.ts b/packages/devextreme/js/__internal/ui/widget.ts deleted file mode 100644 index 0cda28788c66..000000000000 --- a/packages/devextreme/js/__internal/ui/widget.ts +++ /dev/null @@ -1,90 +0,0 @@ -import type { Component } from '@js/core/component'; -import type { dxElementWrapper } from '@js/core/renderer'; -import Widget from '@js/ui/widget/ui.widget'; - -interface AriaOptions { - id?: string; - role?: string; - // eslint-disable-next-line spellcheck/spell-checker - roledescription?: string; - label?: string; - haspopup?: boolean; - expanded?: boolean | undefined; -} - -declare class ExtendedWidget extends Widget { - _keyboardListenerId: string; - - // component - _deprecatedOptions: Record; - - _optionsByReference: Record; - - _disposed?: boolean; - - setAria(ariaOptions: AriaOptions, $element?: dxElementWrapper): void; - setAria( - attribute: string, - value: string | boolean | null | undefined, - $element?: dxElementWrapper - ): void; - - _setWidgetOption(componentInstancePath: string, args: unknown): void; - - _supportedKeys(): Record void>; - // eslint-disable-next-line @typescript-eslint/no-explicit-any - _getKeyboardListeners(): any[]; - _keyboardHandler(options: unknown, onlyChildProcessing: boolean): boolean; - - _fireContentReadyAction(force?: boolean): void; - - _focusOutHandler(event: unknown): void; - _focusInHandler(event: unknown): void; - _hoverEndHandler(event: unknown): void; - - _attachKeyboardEvents(): void; - _attachHoverEvents(): void; - _attachClickEvent(): void; - - _renderFocusState(): void; - _cleanFocusState(): void; - - _toggleVisibility(visible: boolean): void; - - // dom_component - _render(): void; - _initMarkup(): void; - _initTemplates(): void; - _clean(): void; - - _getDefaultOptions(): TProperties; - _getTemplateByOption(optionName: string): unknown; - _getSynchronizableOptionsForCreateComponent(): string[]; - _defaultOptionsRules(): Record[]; - - _setOptionWithoutOptionChange(optionName: string, value: unknown): void; - _setOptionsByReference(): void; - - _toggleActiveState($element: dxElementWrapper, value: boolean, e?: unknown): void; - _toggleFocusClass(isFocused: boolean, $element: dxElementWrapper): void; - - _createComponent( - element: string | HTMLElement | dxElementWrapper, - component: string | (new (...args) => TComponent), - config: TComponent extends Component ? TTProperties : never, - ): TComponent; - - // component - _init(): void; - _initOptions(options: TProperties): void; - _createActionByOption(optionName: string, config?: Record); - _isInitialOptionValue(name: string): boolean; - _setDeprecatedOptions(): void; - _optionChanged(args: Record): void; - _dispose(): void; -} - -// eslint-disable-next-line @typescript-eslint/no-explicit-any -const TypedWidget: typeof ExtendedWidget = Widget as any; - -export default TypedWidget; diff --git a/packages/devextreme/js/core/dom_component.d.ts b/packages/devextreme/js/core/dom_component.d.ts index 1edb6eda8ec6..94a1aac1e229 100644 --- a/packages/devextreme/js/core/dom_component.d.ts +++ b/packages/devextreme/js/core/dom_component.d.ts @@ -17,6 +17,7 @@ import { import { TemplateManager } from './template_manager'; import { FunctionTemplate } from './templates/function_template'; import { DefaultOptionsRule } from './options'; +import { dxElementWrapper } from './renderer'; export type OptionChangedEventInfo = EventInfo & ChangedOptionInfo; @@ -89,7 +90,7 @@ export interface DOMComponentOptions extends ComponentOptions< export default class DOMComponent extends Component { _templateManager: TemplateManager; - _cancelOptionChange?: string; + _cancelOptionChange?: string | boolean; constructor(element: UserDefinedElement, options?: TProperties); @@ -129,7 +130,7 @@ export default class DOMComponent extends Component extends Component { _templateManager: DevExpress.core.TemplateManager; - _cancelOptionChange?: string; + _cancelOptionChange?: string | boolean; constructor( element: DevExpress.core.UserDefinedElement, @@ -668,7 +668,7 @@ declare module DevExpress { */ element(): DevExpress.core.DxElement; - $element(): DevExpress.core.UserDefinedElement; + $element(): DevExpress.core.dxElementWrapper; _getTemplate(template: unknown): DevExpress.core.FunctionTemplate; _invalidate(): void; _refresh(): void; @@ -6511,6 +6511,13 @@ declare module DevExpress.core { * @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. */ interface Condition extends JQueryEventObject {} + /** + * @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. + */ + interface Coordinates { + left: number; + top: number; + } /** * @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. */ @@ -6573,6 +6580,136 @@ declare module DevExpress.core { export type DxElement = {} extends Condition ? T : ElementWrapper; + /** + * @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 dxElementWrapper { + add(selector: string): this; + + addClass(className: string): this; + + after(element: Element | dxElementWrapper): this; + + append(element: Element | dxElementWrapper): this; + + appendTo(element: Element | dxElementWrapper): this; + + attr(attributeName: string, value: string | number | boolean | null): this; + + attr(attributeName: string): string | undefined; + + before(element: Element | dxElementWrapper): this; + + children(selector?: string): this; + + clone(): this; + + closest(selector: string | dxElementWrapper | Node): this; + + contents(): this; + + css(propertyName: string, value: string | number): this; + css(properties: Record): this; + + data(key: string, value?: any): this; + + detach(): this; + + each( + func: (this: Element, index: number, element: Element) => boolean + ): this; + + empty(): this; + + eq(index: number): this; + + filter(selector: string): this; + + find(selector_element: string | Element | dxElementWrapper): this; + + first(): this; + + get(index: number): Element; + + hasClass(className: string): boolean; + + hide(): this; + + html(value?: string): this; + + index(element?: Element | dxElementWrapper): number; + + insertAfter(element: Element | dxElementWrapper): this; + + insertBefore(element: Element | dxElementWrapper): this; + + is(selector: string | dxElementWrapper): boolean; + + last(): this; + + next(selector?: string): this; + + not(selector: string): this; + + offset(): Coordinates | undefined; + + offsetParent(): this; + + parent(selector?: string): this; + + parents(selector?: string): this; + + position(): Coordinates | undefined; + + prepend(element: Element | dxElementWrapper): this; + + prependTo(element: Element | dxElementWrapper): this; + + prev(): this; + + prop(propertyName: string, value: string | number | boolean): this; + + remove(element?: Element | dxElementWrapper): this; + + removeAttr(attributeName: string): this; + + removeClass(className: string): this; + + removeData(key: string): this; + + replaceWith(element: Element | dxElementWrapper): this; + + scrollLeft(value?: string | undefined): this; + + scrollTop(value?: string): this; + + show(): this; + + siblings(): this; + + slice(start?: number, end?: number): this; + + splice(start: number, deleteCount?: number): this; + + text(text: string | number | boolean): this; + text(): string; + + toArray(): Element[]; + + toggle(value: string | undefined): this; + + toggleClass(className: string, value?: boolean): this; + + trim(): this; + + val(value?: string | string[] | number): this; + + wrap(wrappingElement: this | Element | string): this; + + wrapInner(wrappingElement: this | Element | string): this; + + length: number; + } /** * [descr:dxSVGElement] * @deprecated [depNote:dxSVGElement]