TextEditorBase: Improve typing && Refactor (#33081)

Co-authored-by: marker dao ® <youdontknow@marker-dao.eth>

Author: marker-dao

packages/devextreme/js/__internal/ui/chat/message_box/chat_text_area.ts

@@ -432,6 +432,10 @@ class ChatTextArea extends TextArea<Properties> {
   }
 
   _renderFileUploader(): void {
+    if (!this._$textEditorContainer) {
+      return;
+    }
+
     this._$fileUploader = $('<div>')
       .addClass(CHAT_TEXT_AREA_ATTACHMENTS)
       .insertBefore(this._$textEditorContainer);
@@ -584,7 +588,7 @@ class ChatTextArea extends TextArea<Properties> {
     return maxHeight;
   }
 
-  _keyPressHandler(e: InputEvent): void {
+  _keyPressHandler(e: { originalEvent: InputEvent & KeyboardEvent }): void {
     super._keyPressHandler(e);
 
     this._updateButtonsState();

packages/devextreme/js/__internal/ui/color_box/m_color_box.ts

@@ -317,6 +317,10 @@ class ColorBox extends DropDownEditor<ColorBoxProperties> {
     this.$element().wrapInner($('<div>').addClass(COLOR_BOX_INPUT_CONTAINER_CLASS));
     this._$colorBoxInputContainer = this.$element().children().eq(0);
 
+    if (!this._$textEditorInputContainer) {
+      return;
+    }
+
     this._$colorResultPreview = $('<div>')
       .addClass(COLOR_BOX_COLOR_RESULT_PREVIEW_CLASS)
       .appendTo(this._$textEditorInputContainer);

packages/devextreme/js/__internal/ui/date_box/date_box.base.ts

@@ -22,6 +22,7 @@ import type {
 import type { ToolbarItem } from '@js/ui/popup';
 import type { OptionChanged } from '@ts/core/widget/types';
 import DropDownEditor from '@ts/ui/drop_down_editor/m_drop_down_editor';
+import type { ValueChangedEvent } from '@ts/ui/editor/editor';
 
 import type { PopupProperties } from '../popup/m_popup';
 import uiDateUtils from './date_utils';
@@ -466,7 +467,7 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
     }
   }
 
-  _clearValueHandler(e: DxEvent): void {
+  _clearValueHandler(e: ValueChangedEvent & DxEvent): void {
     this.option('text', '');
     super._clearValueHandler(e);
   }

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

@@ -445,21 +445,28 @@ class DropDownEditor<
     return promise.always(this._renderField.bind(this));
   }
 
-  _getButtonsContainer(): dxElementWrapper {
+  _getButtonsContainer(): dxElementWrapper | null | undefined {
     const fieldTemplate = this._getFieldTemplate();
+
     return fieldTemplate ? this._$container : this._$textEditorContainer;
   }
 
   _renderBeforeFieldAddon(): void {
-    if (!this._$beforeFieldAddon) {
+    if (
+      !this._$beforeFieldAddon
+      && this._$textEditorContainer
+    ) {
       this._$beforeFieldAddon = $('<div>')
         .addClass(DROP_DOWN_EDITOR_BEFORE_FIELD_ADDON)
         .insertBefore(this._$textEditorContainer);
     }
   }
 
   _renderAfterFieldAddon(): void {
-    if (!this._$afterFieldAddon) {
+    if (
+      !this._$afterFieldAddon
+      && this._$textEditorContainer
+    ) {
       this._$afterFieldAddon = $('<div>')
         .addClass(DROP_DOWN_EDITOR_AFTER_FIELD_ADDON)
         .insertAfter(this._$textEditorContainer);
@@ -479,6 +486,7 @@ class DropDownEditor<
 
   _renderTemplateWrapper(): void {
     const fieldTemplate = this._getFieldTemplate();
+
     if (!fieldTemplate) {
       return;
     }
@@ -495,10 +503,10 @@ class DropDownEditor<
     this._detachKeyboardEvents();
     this._detachFocusEvents();
 
-    this._$textEditorContainer.remove();
+    this._$textEditorContainer?.remove();
 
     const $newTemplateWrapper = createTemplateWrapperElement();
-    this._$templateWrapper!.replaceWith($newTemplateWrapper);
+    this._$templateWrapper?.replaceWith($newTemplateWrapper);
     this._$templateWrapper = $newTemplateWrapper;
 
     const currentRenderContext = Symbol('renderContext');

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

@@ -716,7 +716,7 @@ class SelectBox<
     return super._isFocused() && $(activeElement).closest(this._input()).length > 0;
   }
 
-  _getValueChangeEventOptionName(): string {
+  _getValueChangeEventOptionName(): keyof TProperties {
     return 'customItemCreateEvent';
   }
 

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

@@ -217,9 +217,12 @@ class TagBox<
     return this._getValue().length === 0;
   }
 
-  _updateTagsContainer($element): void {
-    this._$tagsContainer = $element
-      .addClass(TAGBOX_TAG_CONTAINER_CLASS);
+  _updateTagsContainer($element: dxElementWrapper | null | undefined): void {
+    if (!$element) {
+      return;
+    }
+
+    this._$tagsContainer = $element.addClass(TAGBOX_TAG_CONTAINER_CLASS);
   }
 
   // eslint-disable-next-line class-methods-use-this

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

@@ -160,11 +160,11 @@ class TextArea<
   _getHeightDifference($input: dxElementWrapper): number {
     const verticalElementOffset = getVerticalOffsets(this.$element().get(0), false);
     const verticalEditorContainerOffset = getVerticalOffsets(
-      this._$textEditorContainer.get(0),
+      this._$textEditorContainer?.get(0),
       false,
     );
     const verticalInputContainerOffsets = getVerticalOffsets(
-      this._$textEditorInputContainer.get(0),
+      this._$textEditorInputContainer?.get(0),
       true,
     );
     const inputMargin = getElementBoxParams('height', getWindow().getComputedStyle($input.get(0))).margin;

packages/devextreme/js/__internal/ui/popover/m_popover.ts

@@ -193,6 +193,7 @@ class Popover<
       const { visible } = this.option();
 
       const overlayStack = this._overlayStack();
+      // @ts-ignore this
       const isTopOverlay = overlayStack[overlayStack.length - 1] === this;
 
       if (normalizeKeyName(e) === ESC_KEY_NAME && visible && isTopOverlay) {